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?

Answer 1

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.