I will cut to the chase with a simple code example. For some reason, the $. selection does not work for me inside an exported function, as can be seen in "badTab". The "Bad Title" will not display for that window, while "Good Window" displays fine. Using latest Alloy from npm (alloy --version 0.3.0) and latest production SDK (2.1.3). Tested on iPhone simulator. Any ideas on what's wrong?
Thanks,
Mark
index.xml:
<Alloy> <TabGroup id="myTabGroup"> <Require src="goodTab"/> <Require src="badTab"/> </TabGroup> </Alloy>goodTab.xml:
<Alloy> <Tab id="goodTab" title="Good"> <Window id="goodWin" class="container"> </Window> </Tab> </Alloy>badTab.xml:
<Alloy> <Tab id="badTab" title="Bad"> <Window id="badWin" class="container"> </Window> </Tab> </Alloy>index.js:
var good = Alloy.createController('goodTab'); var bad = Alloy.createController('badTab'); bad.setTitle('Bad Title'); $.myTabGroup.open();goodTab.js:
// $. works well here $.goodWin.setTitle('Good Window');badTab.js:
exports.setTitle = function(title) { // $. does not work inside function // And window title will not display // help? $.badWin.setTitle(title); }
1 Answer
Accepted Answer
You've already created an instance of your tab controllers by putting them in the <Require>'s in your markup. Alloy is calling createController essentially under the hood when you use <Require>. So when you create controllers using createController in index.js, you at that point have 2 instances of each tab, which is the root of your problem. Here's how I would structure your same sample (tested and works):
index.xml<Alloy>
<TabGroup id="myTabGroup">
<Require src="goodTab"/>
<Require src="badTab" id="badTabController"/>
</TabGroup>
</Alloy>
goodTab.xml<Alloy>
<Tab id="goodTab" title="Good">
<Window id="goodWin" class="container">
</Window>
</Tab>
</Alloy>
badTab.xml<Alloy>
<Tab id="badTab" title="Bad">
<Window id="badWin" class="container">
</Window>
</Tab>
</Alloy>
index.js// Don't use createController() if you already have them in markup
// var good = Alloy.createController('goodTab');
// var bad = Alloy.createController('badTab');
$.badTabController.setTitle('Bad Title');
$.myTabGroup.open();
goodTab.js$.goodWin.setTitle('Good Window');
badTab.jsexports.setTitle = function(title) {
$.badWin.setTitle(title);
}
Your Answer
Think you can help? Login to answer this question!