subscribeArrayChanged with KnockoutJS

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.debug.js"></script>
<h3>Added</h3>
<ul data-bind="foreach: added">
    <li data-bind="text: name"></li>
</ul>


    
<h3>Deleted</h3>
<ul data-bind="foreach: deleted">
    <li data-bind="text: name"></li>
</ul>


 <table >
        <tbody data-bind="foreach: dataOne">
           <tr>
             <td ><input type="checkbox" data-bind="checked: $root.name2" /></td>
     
            </tr>   
                                
          </tbody>
</table>

CSS

.items {border-bottom: 1px solid blue;}

JavaScript

var data1 = [{name1: "one"}, {name1: "two"}, {name1: "three"}];
var data2 = [{name2: "five"}, {name2: "two"}, {name2: "three"}];

var viewModel = {
    dataOne: ko.observableArray(data1),
    dataTwo: ko.observableArray(data2),
    added: ko.observableArray(),
 
    deleted: ko.observableArray()
};

viewModel.dataTwo.push({name: "four"}); //add one on the end
viewModel.dataTwo.shift();  //remove the first item

var results = ko.utils.compareArrays(viewModel.dataOne(), viewModel.dataTwo());

ko.utils.arrayForEach(results, function(result) {
    viewModel[result.status].push(result.value);  
});

ko.applyBindings(viewModel);