Appcelerator Titanium Alloy MVC: how is '$' useful?

Question

The framework is set up so that you can load multiple Views (and presumably associated Controllers) at the same time, but I'm having trouble writing correct controller code that 'knows' where everything is.

The Titanium documentation describes the '$' usage like so:

All UI elements which have an id attribute in a view are automatically defined and available as a property prefixed by the special variable $ in the controller. The $ is a reference to the controller. ... To access external controllers and views, use the Alloy.createController and Controller.getView methods, respectively.

The Titanium doc also says that generally Views and Controllers work in pairs.

Suppose I have a View defined that contains a 'back' button, and another View that is a refresh button. The point is that these Views contain associated controllers that need to work no matter what context I'm in. The back button needs to always close the top level window, and the refresh button needs to reload the main view's data, whatever 'main view' I am looking at.

So I create a master view, and load these two views into it. Now I have 3 View-Controllers working together in one context. The logic requires that the back button knows how to close its parent, or even do additional things depending on where you 'go back' from; the refresh button obviously needs to know how to access the parent view's data. How can I use '$' to code if i'm always confined to a single controller? To me, it doesn't make sense that I'm loading 'external' controllers or views when all 3 entities are working in the same place.

Answer 1

Here is an example how you can use $ between different Alloy controllers.

index.js:

$.open.addEventListener('click', function() {
    var view = Alloy.createController(view, { title: 'First Title' });
    view.setTitle('Second Title');
});

$.index.open();

view.js:

var args = arguments[0] || {};

$.setTitle = function(title) {
    $.title.text = title;
};

if (args.title) {
    $.setTitle(args.title);
}

Of course I assume that index.xml and view.xml exists and are similar to this:

index.xml:

<Alloy>
    <Window>
        <Button id="open" title="Open New Window" />
    </Window>
</Alloy>

view.xml:

<Alloy>
    <Window>
        <Label id="title">Empty Title</Label>
    </Window>
</Alloy>