Exclude DOM elements from knockout apply binding?

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

Solution

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

Basically, you can create a custom binding like:

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

Problem

I want to target my knockout viewmodel to certain section of the dom as thus: ``` ko.applyBindings(MyViewModel,$('#Target')[0]); ``` However I do NOT want it to apply to all the doms below it. The reason for this is that the whole SPA thing isn't working very well - can't keep up with the jumbo sized viewmodel that results from including every potential interaction into one giant object. Hence, the page is composed of multiple partial views. I want each partials to instantiate its own ViewModel and provide interface for the parent to interact with. Some sample dom ``` <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 an entire dom tree below the div tagged with `DoNotBindBelowThis` from `applyBindings`?

Original source