Data binding across multiple views


Maybe a fundamental misunderstanding of models and model views here.

I have a tabbed app and want to have the same piece of data in a textfield on more than one page.

I was having trouble with getting a duplication of the code from Groceries to work, and assumed that the view model might actually contain some data (which it shouldn’t, if it’s not a model itself). So maybe one answer was to declare the model as a global. That didn’t work either.

The viewmodel has this:

var viewModel = new observableModule.fromObject({
    dmid: info.dmid || appSettings.getString("dmid", ''),

Which I assume makes dmid a kind of member variable of the viewModel.

I’ve given each page a loaded event handler (which I believe gets called once at the beginning) and that does the data binding:

exports.loaded = function(args) {
page = args.object;
page.bindingContext = global.dialler;

In the xml, I have

    <TextField id="dmid" text="{{ dmid }}" hint="dmid" autocorrect="false" autocapitalizationType="none" />

In this case, I believe dmid field is now bound to the ModelView dmid (although I’m hazy here about where the model itself is - maybe the page is the model?)

So I would hope that other pages with a dmid TextField would share the two-way binding, but it doesn’t work like that. Where (conceptually) am I going wrong?!



I can’t help but think that the idea of a global viewModel is inherently senseless - and that a viewModel should be stateless. But maybe my biggest problem is knowing where the model is!


Those are different instances of Observable in each page, one may not aware of the change in another. You might want to create a centralized observable which should be used in every text field in each page, so all will be connected to each other.


Mmm, that’s what I thought I’d done by making my ViewModel global.


OK, so my bad here - one of the pages didn’t have a loaded handler correctly wired in.