Call function from outside master view model in knockout.js

Question

I've seen similar topics about it, but none of them using exactly the same structure as me.

I am using multiple view models and I deal with it by creating a MasterModel function which later on I pass as an argument to applyBindings.

Basically something like this:

var MasterModel = function(){
    this.user = new UserViewModel();
    this.department = new DepartmentViewModel();
}

ko.applyBindings(MasterModel);

Now, I would like to be able to access from Javascript to a function inside one of my view models and I'm having troubles with it.

I managed to call the viewmodel function if I change the applyBindings to this:

var mm = new MasterModel();
ko.applyBindings(mm);

mm.user.sayHi();

But then I found out things like the following stop working:

<ul data-bind="foreach: department.list()">
     <li data-bind="text: department.getDemo($data)"></li>
</ul>

Message: department is not defined

Reproduction online

And as you can see here, it works perfectly when using ko.applyBindings(MasterModel);

Any solution for this?

Answer 1

You need to point Knockout in the right direction in order to use department:

<li data-bind="text: $root.department.getDemo($data)"></li>

When you're inside a foreach loop, the scope is the item you're currently iterating on, and this item (obviously) doesn't have the department property.

You need to use $root to tell Knockout that it's the department defined on the root view-model you're referring to.

See Fiddle and Documentation

Answer 2

Inside the foreach, you don't have direct access to department because foreach introduces its own binding context. You can use $root or $parent to access your MasterModel:

<ul data-bind="foreach: department.list()">
   <li data-bind="text: $parent.department.getDemo($data)"></li>
</ul>

http://jsfiddle.net/qWmat/109/

A binding context is an object that holds data that you can reference from your bindings. While applying bindings, Knockout automatically creates and manages a hierarchy of binding contexts. The root level of the hierarchy refers to the viewModel parameter you supplied to ko.applyBindings(viewModel). Then, each time you use a control flow binding such as with or foreach, that creates a child binding context that refers to the nested view model data.

Read more