Edit in JSFiddle

//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("bob@smith.net")  

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

    <h2 data-bind="text: header"></h2>
    <ul data-bind="foreach: sections">
            <a href="#" data-bind="click: $root.selectedSection, text: $data"></a> 
    <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 data-bind="visible: selectedSection() === 'settings', stopBinding: true">
            <div id="settings">
                <input type="checkbox" data-bind="checked: isActive" /> Is Active
        <div data-bind="visible: selectedSection() === 'notifications', stopBinding: true">
            <div id="notifications">
                Email: <input data-bind="value: emailAddress" />
    <div data-bind="text: footer"></div>
a { padding: 5px; }
li { display: inline; }
h2 { font-weight: bold; font-size: 1.4em; }
#content { padding: 20px; }