Knockout Example - Extend Example

using extend to capture changes to overservable array

HTML

<div style="display: table-cell;" id="Form2">
     <h3>People</h3>

    <ul data-bind="foreach:people">
        <li>name:
            <input class="small" data-bind="value: forename, attr: { name: uniquef}"/>
            <input class="small" data-bind="value: surname, attr: { name: uniques}" />
            <button data-bind="click: $parent.btnDelete">-</button>
        </li>
    </ul>
    <button data-bind="click: btnAdd">+</button>
</div>

CSS

input.small {
    width:50px;
}

JavaScript

ko.extenders.logChange = function (target, option) {
     target.subscribe(function (newValue) {
         console.log(option + ": " + newValue);
     });
     return target;
 };

 function person(u,f,s, c) {
     var self = this;
     self.uniq = u;
     self.created = new Date();
     //self.forename = ko.observable(f).extend({logChange:2});
     self.forename = ko.observable(f);
     self.forename.extend({logChange:2});
     self.surname = ko.observable(s).extend({logChange:3});
     self.uniquef = ko.computed(function(){return "forename-"+self.uniq},this);
     self.uniques = ko.computed(function(){return "surname-"+self.uniq},this);
     return self;
 }

 function viewModel_2() {
     var self = this;
     // data
     self._un=0;
     self.people = ko.observableArray([
         new person(self._un++,"Fred","Smith", 23),
         new person(self._un++,"Bert","Delly", 73)
     ]).extend({logChange:1});
     // Operations
     self.btnAdd = function () {
         self.people.push(new person(self._un++,"","", 0))
     };
     self.btnDelete = function (person) {
         self.people.remove(person)
     };

 };
 var peopleViewModel = new viewModel_2();

 ko.applyBindings(peopleViewModel, document.getElementById("Form2"));