Alloy id selection ($.) issue

You must Login before you can answer or comment on any questions.

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);
}

— asked 7 months ago by Mark M
0 Comments

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.js
exports.setTitle = function(title) {
    $.badWin.setTitle(title);
}

— answered 7 months ago by Tony Lukasavage
answer permalink
1 Comment
  • Thanks Tony :) Not sure this is clear from the docs (I may have missed something...), would be great to clarify. Awesome job and thanks for the quick answer!

    — commented 7 months ago by Mark M

Your Answer

Think you can help? Login to answer this question!