knockout: moving elements around

by Richard Hunter

HTML

<div id="templates">
    <div id="foo">
        <h1 data-bind="text: foo"></h1>
        <p>lorem ipsum blah jd djkjd kldkd jld f</p>
    </div>
</div>

<div id="slider"></div>

<label>value of foo<input type="text" data-bind="value: foo"/></label>

<button id="populate">populate</button>
<button id="depopulate">depopulate</button>

CSS

#slider, #foo {
    
    min-height : 100px;
}

#foo { background : lightblue; }
#slider{ background : yellow; padding : 20px; }

JavaScript

var populate = document.querySelector("#populate");
var depopulate = document.querySelector("#depopulate");

populate.addEventListener("click", populateSlider.bind(null, "#foo"), false);
depopulate.addEventListener("click", depopulateSlider.bind(null, "#foo"), false);

var slider = document.querySelector("#slider");
var templateContainer = document.querySelector("#templates");

function populateSlider(selector) {
    
    var contents = document.querySelector(selector);
    
    slider.appendChild(contents);

}

function depopulateSlider(selector) {

    var contents = slider.querySelector(selector);  
    
    templateContainer.appendChild(contents);
}

var model = {

    foo : ko.observable("this is foohoo")
}

ko.applyBindings(model);