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 posed 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?

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 posed 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?

• javascript
• asp-mvc
• dom
• asp-mvc-4
• knockout.js

1 Answer 1

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

Basically, you can create a custom binding like:

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