I am currently using knockout applyBindingsToNode to dynamically add and remove elements in order to update my html. I need to cut the binding, which is why I am utilizing applyBindingsToNode.
In an example I have provided, if you click on the button "Rebind name", it adds four elements instead of the expected two. Is there something that I am overlooking?
For more details, please refer to my jsfiddle at http://jsfiddle.net/noppanit/dhztqgbz/
var Model = function Model() {
var people = ko.observableArray([{
name: 'name1'
}, {
name: 'name2'
}]);
var changeElement = function () {
people.push({
name: 'name3'
});
};
var rebindElement = function () {
var peopleList = document.getElementById('people_list');
ko.cleanNode(peopleList);
ko.applyBindingsToNode(peopleList, {
foreach: [{
name: 'name3'
}, {
name: 'name4'
}]
});
};
return {
people: people,
changeElement: changeElement,
rebindElement: rebindElement
};
};
ko.applyBindings(new Model(), document.getElementById('wrapper'));