//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"));
<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>
a { padding: 5px; } li { display: inline; } h2 { font-weight: bold; font-size: 1.4em; } #content { padding: 20px; }