knockout: multiple bindings per page

by Richard Hunter

HTML

<div id="slider">this is the slider

    <h2 data-bind="text: title"></h2>
    <input type="text" data-bind="value: title"/>
</div>

<div id="foo">
    
    <h1 data-bind="text: title"></h1>
    <label>title: <input type="text" data-bind="value: title"/></label>
    
</div>

<button id="open">open slider</button>

CSS

#foo {
    
    background : yellow;
    padding : 10px;
}

#slider {
    padding : 20px;
    background : pink;
    
}
#open {
    background : lightblue;
    padding : 10px;
    margin : 10px;
    
}

JavaScript

var fooModel = {
    title : ko.observable("title")
}

ko.applyBindings(fooModel, document.querySelector("#foo"));

var openButton = document.querySelector("#open");

openButton.addEventListener("click", openSlider.bind(null), false);

function openSlider() {
    console.log("open slider");
    ko.applyBindings(fooModel, document.querySelector("#slider"));
}