CODEWITHSUNDEEP
asp.net-mvc-4knockout.jsknockout-mvc
rross
rross

Reputation: 2276

Using two Knockout view models for one page

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?

Upvotes: 4

Views: 3347

Answers (3)

roblem
roblem

Reputation: 591

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

Upvotes: 0

Darussian
Darussian

Reputation: 1593

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.

Upvotes: 7

Kyeotic
Kyeotic

Reputation: 19847

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.

Upvotes: 8

Related Questions