Using two Knockout view models for one page

asp.net-mvc-4, knockout-mvc, knockout.js

Solution

`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.

Problem

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?

Original source