Titanium alloy: I want to add and delete rows from one window and it will automatically update in second window - titanium

Question

i have two xml files..index.xmland win2.xml and both windows have tableview with same content in the rows i mean to say:
index.xml
<Alloy>
<Window backgroundColor="red" >
<ScrollView id="scrollview" >
<TableView id="table" >
<TableViewRow title="Capsicum" onClick="select"></TableViewRow>
<TableViewRow title="Beans" onClick="select" ></TableViewRow>
<TableViewRow title="Spinach" onClick="select"></TableViewRow>
<TableViewRow title="Pizza" onClick="select"></TableViewRow>
<TableViewRow title="Burger" onClick="select"></TableViewRow>
</TableView>
</View>
</ScrollView>
</Window>
index.js
function select(e) {
if (e.row.hasCheck) {
e.row.hasCheck = false;
} else {
e.row.hasCheck= true;
}
}
$.index.open();
win2.xml
<Alloy>
<Window backgroundColor="red" id="win2">
<TableView id="tableView" >
<TableViewRow title="Capsicum" onClick="select"></TableViewRow>
<TableViewRow title="Beans" onClick="select" ></TableViewRow>
<TableViewRow title="Spinach" onClick="select"></TableViewRow>
<TableViewRow title="Pizza" onClick="select"></TableViewRow>
<TableViewRow title="Burger" onClick="select"></TableViewRow>
</TableView>
<TextField id="textfield" returnKeyType="Ti.UI.RETURNKEY_DONE" onReturn="addRow" class="insertField" hintText="Add ingredients"></TextField>
<Button id="removeButton" onClick="removeRow"></Button>
</Window>
</Alloy>
win2.js
function select(e) {
if (e.row.hasCheck) {
e.row.hasCheck = false;
} else {
e.row.hasCheck= true;
}
}
function addRow(){
var myTextFieldValue = $.textfield.value.trim();
if (myTextFieldValue != "") {
$.tableView.appendRow( Ti.UI.createTableViewRow({title:myTextFieldValue}) );
}
}
function removeRow() {
// first get all sections of table which will be first section in your case
var sections = $.tableView.sections;
// perform this check to make your code error free when there are no rows added to tableview.
if (sections.length !== 0) {
var rows = sections[0].rows;
var totalRows = rows.length;
if (totalRows !== 0) {
// now delete all rows which has uncheck=true
for (var i=0; i<totalRows; i++) {
var tempCurrentRow = rows[i];
if (tempCurrentRow.hasCheck) {
$.tableView.deleteRow(tempCurrentRow);
}
}
}
}
}
Now if i add or delete any element from win2.xml or second window it will also delete from or add in index.xml or first window...
Note:
i only want to delete the checked elements i.e hasCheck=true from second window and when i add some new element then i will be able to check them like old elementsLike This
can we create a single tableview and access in both windows?

Answer 1

Like #Rene Pot is saying you could use data binding or if it is too much you could just share the data via a file or property.
You would need to create a JSON object out of your data and the parse this data to create the table. Once you change the data inside the table you apply all the changes to the JSON object. When you open your windows you create the table out of that data.
initial data:
var myData = [{"name":"Item name 1", "checked": true,..}, {"name":"Item name 2", "checked": false,..}, ...];
Ti.App.Properties.setObject("myData", myData);
now in your two other controllers:
var myData = Ti.App.Properties.getObject("myData", []); // this will receiv myData or {}
Now myData has all elements and you would create the table out of this array.
When you change row 0 to be checked you change myData[0].checked=true/false;. At the end you do a Ti.App.Properties.setObject("myData", myData) again to store the data.
If you have much data or want to keep it even if the users clears the app cache/storage you could save myData into a file and read it again instead of getObject.
For the future:
Using data binding/models will help you to get rid of all these manual updates. When you change data all connected elements will update