Knockout.js: Multiple ViewModel bindings on a page or a part of a page

Question

I am wondering if it is possible to use Knockout.js's ko.applyBindings() multiple times to bind different ViewModels to one part of a page. For example, let's say I had this:

<div id="foo">...</div>
...
ko.applyBindings(new PageViewModel());
ko.applyBindings(new PartialViewModel(), $('#foo')[0]);

I am now applying two ViewModel bindings to <div id="foo>. Is this legal?

Bifilar

Answer 1

You do not want to call ko.applyBindings multiple times on the same elements. Best case, the elements will be doing more work than necessary when updating, worse case you will have multiple event handlers firing for the same element.

There are several options for handling this type of thing that are detailed here: Example of knockoutjs pattern for multi-view applications

If you really need an "island" in the middle of your content that you want to call apply bindings on later, then you can use the technique described here: http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html

Rental

Answer 2

This is a common road block that comes when implementing JqueryMobile-SPA. The method : ko.applyBindings(viewmode,root dom element) accepts two arguments. The second argument comes helpful when you have multiple VM's in your page.

for example :

ko.applyBindings(model1, document.getElementById("view1")); 
ko.applyBindings(model2, document.getElementById("view2"));

where view1 and view2 are the root dom element for that model. For a JqueryMobile-SPA this will be the page ids for corresponding model.

Dangle

The second parameter can be written using jquery as well, $("#view1")[0] – Fibrinolysin

Answer 3

The best way to do this would be use the "with" binding construct in the div that you want the partial view model to be bound. You can find it in this fiddle

<div data-bind="with: model">
   <p data-bind="text: name"></p>
</div>

<div data-bind="with: anothermodel">
   <p data-bind="text: name"></p>
</div>​

var model = {
   name: ko.observable('somename'),
}

var anothermodel = {
    name: ko.observable('someanothername'),
}
ko.applyBindings(model);​

Also check out the "with" binding documentation on the Knockout site, to look at an AJAX callback - partial binding scenario.

Apulia

Although this partically works it will fail when adding/removing content from an obserableArray (in anotherModel) if its not binded in applyBindings. Wrap the two models into one as here: #8677488 – Plebs

Answer 4

My english is very bad.... =)

I use Sammy to load partial views, and Knockout to bind the Model, I try use ko.cleanNode but clean all my bindings, all DOM nodes has changed when has a bind, a property __ko__ is aggregated, then i removed that property with this code, and works !!, '#main' is my node.

var dom = dom || $("#main")[0];
for (var i in dom) {
  if (i.substr(0, 6) == "__ko__") {
     delete (dom[i]);
     break;
  }
}

after use Ggle translator:

I use Sammy for the load of partial views, and Knockout for the bind the Model, I try to use ko.cleanNode but clean all my bindings, all DOM nodes has changed when they has a bind, a property ko is aggregated, then i removed that property with this code, and works !!, '#main' is my node.

Circulate

Thank you, this is the only solution that has worked for me. ko.cleanNode stopped sammy.js from working. – Dynamic