Exclude DOM elements from knockout binding?

Question

I want to tune my knockout model to a specific dom section as follows:

ko.applyBindings(MyViewModel,$('#Target')[0]); 

However, I DO NOT want this to apply to all the ladies below. The reason for this is that the whole SPA thing does not work very well - it cannot keep up with the huge viewing model that arises from the inclusion of each potential interaction in one gigantic object. Therefore, the page consists of several partial views. I want each particle to instantiate its own ViewModel and provide an interface for interacting with parents.

Dom sample example

 <div id="Target"> <!--Everything here should be included except--> <div data-bind="DoNotBindBelowThis:true"> <!--Everything here should NOT be included by the first binding, I will specifically fill in the binding with targetted ApplyBind eg. ko.applyBindings(MyOtherViewModel, $('#MyOtherTarget')[0]) to fill the gaps--> <div id="MyOtherTarget"> </div> </div> </div> 

Again, how can I exclude the whole dom tree below the div with the DoNotBindBelowThis tag from applyBindings ?

Answer 1

Take a look at the blog post: http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html

Basically, you can create custom bindings, for example:

 ko.bindingHandlers.DoNotBindBelowThis = { init: function() { return { controlsDescendantBindings: true }; } };