How to stop knockout.js bindings evaluating on child elements

http://stackoverflow.com/questions/9254632/how-to-stop-knockout-js-bindings-evaluating-on-child-elements

by rniemeyer

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.0.0.js"></script>
<div id="main">
    <div data-bind="text: name"></div>
    <div data-bind="stopBindings: true">
        <div id="sub" data-bind="text: sub"></div>
    </div>
    <button data-bind="click: bindSub">Bind Sub</button>
</div>

JavaScript

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

var viewModel = {
    name: ko.observable("Bob"),
    bindSub: function() {
        ko.applyBindings({ sub: "Ted" }, document.getElementById("sub"));   
    }
};
                         
ko.applyBindings(viewModel);