ko.utils.compareArrays

http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html

by romanych

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/jquery.tmpl.js"></script>
<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<div id="list" data-bind="template: {name: 'tmpl', foreach: computedData, afterRender: called, beforeRemove: removeCalled}"></div>

<script id="tmpl" type="text/html">
    <div>${ $data.name}</div>
</script>
<button id="mod">add one</button>
<button id="remake">clear</button>
<div class="grey"></div>

CSS

.grey {background: #efefef; padding: 5px; border: 1px solid #000;}

JavaScript

var data = [{name: "one"}, {name: "two"}, {name: "three"}];


var viewModel = {
    items: ko.observableArray(data),
    called: function() {$('.grey').append('called<br/>');},
    removeCalled: function(node) {
        $(node).remove();
        $('.grey').append('remove called<br/>');
    }
};

viewModel.computedData = ko.computed(function() {
    return viewModel.items();
}, viewModel);
    
ko.applyBindings(viewModel);
                        
$(document).ready(function(){
    $('#mod').click(function() {
        viewModel.items.push({name: "new one"});
    });
    $('#remake').click(function() {
        viewModel.items.removeAll();
    });
});