Data binding across multiple views


#1

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?!

Cheers…


#2

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!


#3

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.


#4

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


#5

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