Appcelerator Titanium - Using Model as dynamic theme - titanium

Question

Will this be a good idea:
I recently asked a question about themes (letting the user choose a theme and immediately applying it). To do this I had the thought of using Models and binding - which I used the opportunity to finally learn.
I got the desired result - creating a theme and applying it using a model with data binding, and in my test app I did the following:
app.tss
"Label": {
backgroundColor: "{theme.backgroundColor}"
}
(of course in a real app there will be much more definitions and much more bindings.
Doing this requires that I include my Model in every page like this (index.xml):
<Alloy>
<Model src="theme" />
<Window class="container" layout="vertical">
<View
id="test"
width="150"
height="150"
top="10">
</View>
<Label id="label" onClick="doClick" top="10">Hello, World</Label>
<Label onClick="doClick" top="10">Hello, World</Label>
<Label onClick="doClick" top="10">Hello, World</Label>
<Label onClick="doClick" top="10">Hello, World</Label>
<Label onClick="doClick" top="10">Hello, World</Label>
<Label onClick="doClick" top="10">Hello, World</Label>
<Label onClick="doClick" top="10">Hello, World</Label>
<Label onClick="doClick" top="10">Hello, World</Label>
<Label onClick="doClick" top="10">Hello, World</Label>
<Label onClick="doClick" top="10">Hello, World</Label>
<Label onClick="doClick" top="10">Hello, World</Label>
</Window>
</Alloy>
(In my real app I'm using an implementation of cross-platform navigation control so I will just pass this model when I open the window in a single place)
Obviously doing this kind of thing will create many binding for pretty much each element on the page. I don't exactly know what is going on behind the scenes, but I'm guessing that it creates a listener for each such binded value - which results in many listeners, a lot of overhead and generates more code for the page.
Guessing I'm pretty much answering my own question - is this path recommended to continue investigating? How bad is this?

Answer 1

It is possible using classes and re-applying them when it changes. You only have to monitor for an event at one place per controller
You can take a look at the example I wrote about dynamic styling based on orientation on GitHub
You can do that like this:
".DynamicLabel[if=Alloy.Globals.isPortrait]": {}
You should be using Backbone events, like also specified in the repository I linked above.
Alloy.js:
Alloy.Globals.events = _.clone(Backbone.Events);
Controller.js:
Alloy.Globals.events.on('orientationchange', () => {
But: This is very complicated and introduces complexity you don't need. The events part I wouldn't recommend for a complicated application. But.. it is possible!
What I would recommend for a complex application, is use the if filters in the tss and just close and re-open the controllers you want to have re-styled.