2012/05/quick-tip-skip-binding.html

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

by gurkavcu

HTML

<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div>
    <h2 data-bind="text: header"></h2>
    <hr/>
    <ul data-bind="foreach: sections">
        <li>
            <a href="#" data-bind="click: $root.selectedSection, text: $data"></a> 
        </li>
    </ul>
    <hr/>
    <div id="content">
        <div data-bind="visible: selectedSection() === 'profile', stopBinding: true">
            <div id="profile">
                <input data-bind="value: first" />
                <input data-bind="value: last" />
            </div>
        </div>
        <div data-bind="visible: selectedSection() === 'settings', stopBinding: true">
            <div id="settings">
                <input type="checkbox" data-bind="checked: isActive" /> Is Active
            </div>
        </div>
        <div data-bind="visible: selectedSection() === 'notifications', stopBinding: true">
            <div id="notifications">
                Email: <input data-bind="value: emailAddress" />
            </div>
        </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; }

JavaScript

//let KO know that we will take care of managing the bindings of our children
ko.bindingHandlers.stopBinding = {
    init: function() {
        return { controlsDescendantBindings: true };
    }        
};
    
//KO 2.1, now allows you to add containerless support for custom bindings
ko.virtualElements.allowedBindings.stopBinding = true;
        
var profileModel = {
    first: ko.observable("Bob"),
    last: ko.observable("Smith")
};

var shellModel = {
    header: ko.observable("Administration"),
    sections: ["profile", "settings", "notifications"],
    selectedSection: ko.observable("profile"),
    footer: ko.observable("copyright information")
};

var settingsModel = {
    isActive: ko.observable(true)        
};

var notificationsModel = {
    emailAddress: ko.observable("[email protected]")  
};

ko.applyBindings(shellModel);
ko.applyBindings(profileModel, document.getElementById("profile"));
ko.applyBindings(settingsModel, document.getElementById("settings"));
ko.applyBindings(notificationsModel, document.getElementById("notifications"));