knockout late stage binding

read more at http://www.knockmeout.net/2012/05/quick-tip-skip-binding.html

by Jaak Kütt

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div>
    <h2 data-bind="text: header"></h2>
    <div id="content">
        <div data-bind="stopBinding: true">
            <div id="profile">
                <input data-bind="value: first" />
                <input data-bind="value: last" />
                <button onClick="addInput('shell');">add shell input</button> 
                <button onClick="addInput('profile');">add profile input</button> 
                <button onClick="addInput('settings');">add settings input</button> 
            </div>
        </div>
        <div data-bind="stopBinding: true" id="addNewContentHere">
            
        </div>
    </div>
    <hr/>
    <div data-bind="text: footer"></div>
</div>

CSS

a { padding: 5px; }
li { display: inline; }
h2 { font-weight: bold; font-size: 1.4em; }
#content { padding: 20px; }
input{width:100px;}

JavaScript

//Add and bind an input field
function addInput(model){
    var data=$('<div class="box"><input type="input" data-bind="value: newInput" /></div>');
    ko.applyBindings(window[model+'Model'], data[0]);
    $('#addNewContentHere').append(data);
};                

//let KO know that we will take care of managing the bindings of our children
ko.bindingHandlers.stopBinding = {
    init: function() {
        return { controlsDescendantBindings: true };
    }        
};

//Models
var profileModel = {
    first: ko.observable("Bob"),
    last: ko.observable("Smith"),
    newInput: ko.observable('profile value')        
};
var shellModel = {
    header: ko.observable("Administration"),
    footer: ko.observable("copyright information"),
    newInput: ko.observable('shell value')        
};
var settingsModel = {
    newInput: ko.observable('settings value')        
};

//Initial bindings
ko.applyBindings(shellModel);
ko.applyBindings(profileModel, document.getElementById("profile"));