appcelerator alloy pass arguments
I am trying to figure out how to pass an argument between views in alloy. I will have a have nav group which will have multiple tables, so it maybe 3 to 5 levels deep.
I can pass arguments from the controller to the view but I want to pass information (ids of categories) from the view to the next table when it is clicked.
I am not sure how to do this in alloy, I always get undefined errors when trying to access the variable. Below is my current setup.
In my views I have: index.xml, master.xml, row.xml, detail.xml, subDetail.xml
Index.xml
<Alloy>
<Window id="index">
<NavigationGroup id="navgroup">
<Require src="master" id="master"/>
</NavigationGroup>
</Window>
</Alloy>
Here is my index.js
Alloy.Globals.navgroup = $.navgroup;
$.master.on('detail', function(e) {
// get the detail controller and window references
var controller = Alloy.createController('detail');
var win = controller.getView();
// open the detail windows
$.navgroup.open(win);
/*
if (OS_IOS && Alloy.isHandheld) {
Alloy.Globals.navgroup.open(win);
} else if (OS_ANDROID) {
win.open();
}*/
});
$.index.open();
master.xml
<Alloy>
<Window title="Categories">
<TableView id="table" onClick="openDetail">
</TableView>
</Window>
</Alloy>
master.js
function openDetail(e) {
$.trigger('detail', e);
}
var data = [];
var sendit = Ti.Network.createHTTPClient({
onerror: function(e){
Ti.API.debug(e.error);
alert('There was an error during the connection');
},
timeout:1000,
});
//Here you have to change it for your local ip
sendit.open('GET', 'http://url.com/json.php?showCats=1');
sendit.send();
//Function to be called upon a successful response
sendit.onload = function(){
var json = JSON.parse(this.responseText);
//var json = json.todo;
//if the database is empty show an alert
if(json.length == 0){
$.table.headerTitle = "The database row is empty";
}
//Emptying the data to refresh the view
//Insert the JSON data to the table view
for ( var i=0; i<json.length; i++){
data.push(Alloy.createController('row', {
name: json[i].CatName,
catID: json[i].CatID
}).getView());
//data.push(row);
Ti.API.info(json[i].CatName);
Ti.API.info(json[i].CatID);
}
$.table.setData(data);
};
row.xml
<Alloy>
<TableViewRow>
<Label id="name"/>
<Label id="catID"/>
</TableViewRow>
</Alloy>
row.js
var args = arguments[0] || {};
$.row.fighterName = $.name.text = args.name;
$.catID.text = args.catID;
detail.xml
<Alloy>
<Window title="Sub Categories">
<TableView id="subtable" onClick="openSubDetail">
</TableView>
</Window>
</Alloy>
detail.js
function openSubDetail(e) {
$.trigger('subDetail', e);
}
var data = [];
var sendit = Ti.Network.createHTTPClient({
onerror: function(e){
Ti.API.debug(e.error);
alert('There was an error during the connection');
},
timeout:1000,
});
//Here you have to change it for your local ip
Ti.API.info('Cat id');
Ti.API.info(catID);
Ti.API.info('data Value:'+ $.detail.catID );
sendit.open('GET', 'http://url.com/mobile/includes/json.php?catID=12');
sendit.send();
//Function to be called upon a successful response
sendit.onload = function(){
var json = JSON.parse(this.responseText);
//var json = json.todo;
//if the database is empty show an alert
if(json.length == 0){
$.table.headerTitle = "The database row is empty";
}
//Emptying the data to refresh the view
//Insert the JSON data to the table view
for ( var i=0; i<json.length; i++){
data.push(Alloy.createController('subDetail', {
name: json[i].SubcatName,
catID: json[i].CatID
}).getView());
//data.push(row);
Ti.API.info('Second Level');
Ti.API.info(json[i].SubcatName);
}
$.subtable.setData(data);
};
Answer
on the row click event create a new controller and pass in the object as a parameter to the controller. This way when the window is opened in the controller, the controller has the data.
it is the same as you have done when creating the subDetail row