How to stop knockout.js bindings evaluating on child elements

http://stackoverflow.com/questions/9254632/how-to-stop-knockout-js-bindings-evaluating-on-child-elements

by manchagnu

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.js"></script>
<div id="x">
    <input type='text' data-bind='value: newName'></input>
    <button class='addMore'>Add More</button>
    <ul data-bind="foreach: people">
        <li data-bind="text: name"></li>
    </ul>
</div>

JavaScript

var el = document.getElementById("x");

var viewModel = ko.mapping.fromJS({
    people: [],
    newName: ''
});
                         
ko.applyBindings(viewModel, el);

setTimeout(function () {
    
    ko.mapping.fromJS({
        people: [{ name: "Joe2" }, { name: "Domenic2" }, { name: "Paul2" }]
    }, viewModel);

}, 3000);


$('.addMore').on('click', function(){
    viewModel.people.push(ko.mapping.fromJS({name:viewModel.newName()}));
    viewModel.newName('');
});