Using two Knockout view models for one page

Question

I'm setting up two view models in knockout.

$.getJSON("/api/administrators", function (data) {        
    var AccessViewModel = {
        administrators: ko.observableArray(data)
    };
    ko.applyBindings(AccessViewModel);

});

$.getJSON("/api/roles", function (data) {
    var RolesViewModel = {
        definedRoles: ko.observableArray(data)
    };
    ko.applyBindings(RolesViewModel);

});

I'm able to get the information from administrators in the view, but unable to pull anything out of definedRoles. When I add an alert inside of the .getJSON function for roles it is returning data. It seems something is wrong between creating the RolesViewModel and when I call it like so:

<ul data-bind="foreach: definedRoles">
    <li data-bind="text: name"></li>
</ul>

Can someone point me in the right direction?

score 8 · Accepted Answer · answered Mar 25 '13 at 18:05

ko.applyBindings can only be called once per section. If you don't pass a second parameter, the section is the entire page. If you have a specific section, like a DIV, you should pass it in as the second parameter.

Or, you can make one viewmodel for the page, with a property for both lists, and just bind your page to this single viewmodel. I recommend this approach. That code might look like this:

var ViewModel = function() {
    this.administrators = ko.observableArray([]);
    this.definedRoles = ko.observableArray([]);
};

var vm = new ViewModel();
ko.applyBindings(vm);

$.getJSON("/api/administrators", function (data) {
    vm.administratos(data);
});

$.getJSON("/api/roles", function (data) {
    vm.definedRoles(data);
});

Remember, since ko.applyBindings only needs to be called once, you should do it as early as possible. Calling it from ajax methods is generally a bad idea for a couple reasons. One, the ajax method is no longer reusable as an update call; and two, other page functionality has to wait until the ajax method has returned to start working.

where would the behavior for administrators go in this scenario? — rross, Apr 17 '13 at 17:09

score 7 · Answer 2 · answered Mar 25 '13 at 19:00

7

Tyrsius answer is correct but for future reference you can bind two different view models to the same page. You would have to bind the Models like

ko.applyBindings(wallView,$("#WallKo")[0]);

and wrap the html with a div with chosen Id i.e

<div id = "WallKo">
    <div data-bind="foreach:posts">
         .....
    </div>
</div>

Then you can have as many view models as you want for each page.

answered Mar 25 '13 at 19:00

Darussian

1,573
1
16
28

Sorry didn't notice that. Oh well.. it furthers your statament – Darussian Mar 26 '13 at 21:20

score 0 · Answer 3 · answered Mar 19 '15 at 17:02

0

Thanks for the example of HOW to bind a model to a specific div. Very helpful

answered Mar 19 '15 at 17:02

roblem

527
5
8

Using two Knockout view models for one page

3 Answers3