Knockout - Notify when item is removed from observableArray

https://groups.google.com/d/topic/knockoutjs/RLzj244VGSo/discussion

by johnpapa

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<div id="view">
    <ul data-bind="foreach: items">
        <li>
            <input type="checkbox" data-bind="value: selected" />
            <span data-bind="text: id"></span>
            <input data-bind="value: name" />
        </li>
    </ul>
</div>

<hr/>

<div id="original">
    <ul data-bind="foreach: items">
        <li>
            <span data-bind="text: id"></span> - 
            <span data-bind="text: name"></span>
            <a href="#" data-bind="click: $root.remove"> x </a>
        </li>
    </ul>
</div>

JavaScript

//original item
var Item = function(id, name) {
    this.id = id;
    this.name = name;
};

//item with extras added for view
var ViewItem = function(item) {
    this.id = item.id;
    this.name = ko.observable(item.name);
    this.selected = ko.observable(false);
};

//model for original items
var OriginalItemsModel = function(items) {
    var self = this;
    this.items = ko.observableArray(items);
    this.remove = function(item) {
       self.items.remove(item);
       self.items.notifySubscribers(item, "itemRemoved");  
    };
};

//model for view items
var ViewItemsModel = function(originalItems) {
   var self = this;
   this.items = ko.observableArray(ko.utils.arrayMap(originalItems(), function(item) {
       return new ViewItem(item);   
   })); 
    
   originalItems.subscribe(function(removedItem) {
        self.items.remove(function(item) {
           return removedItem.id === item.id; 
        });
   }, null, "itemRemoved");
};

var originalModel = new OriginalItemsModel([
   new Item(1, "one"),
   new Item(2, "two"),
   new Item(3, "three"),
   new Item(4, "four"),
   new Item(5, "five") 
]);

var viewModel = new ViewItemsModel(originalModel.items);

ko.applyBindings(viewModel, document.getElementById("view"));
ko.applyBindings(originalModel, document.getElementById("original"));