Knockout array subscription not working

Question

I have been trying for a few days now to have Knockout raise an event every time a 'zip code' value changes on a list of people lines. I've tried various ways to achieve this behaviour but just can't seem to get it right. Currently, this is the Html that I have: -

<table>
    <thead>
        <tr>
            <th>First name</th>
            <th>Last Name</th>
            <th>Age</th>
            <th>Zip Code</th>
        </tr>
    </thead>
    <tbody data-bind="foreach: people">
        <tr>
            <td data-bind="text: firstName"></td>
            <td data-bind="text: lastName"></td>
            <td data-bind="text: age"></td>
            <td ><input id="zipCodInput" data-bind="value: zipCode" /></td>
        </tr>
    </tbody>
</table>
</body>

And this is the script that I have which populates the table: -

<script>
    jQuery(document).ready(function () {

        // Ultimately will come from an Ajax call
        //var result = $.ajax({
        //    type: "GET",
        //    url: "/api/Resource",
        //    async: false
        //}).responseText;

        // Hard coded array for testing
        var result = [{ "firstName": "Jimmy", "lastName": "Smith", "age": "43", "zipCode": "" },
        { "firstName": "John", "lastName": "Jones", "age": "23", "zipCode": "" },
        { "firstName": "Sarah", "lastName": "Palmer", "age": "26", "zipCode": "GH7HU" },
        { "firstName": "Fred", "lastName": "Smith", "age": "34", "zipCode": "" },
        { "firstName": "Simon", "lastName": "Davis", "age": "53", "zipCode": "" }];

        function viewModel() {
            var myArray = ko.observableArray(result);

            myArray.subscribe(function (changes) {
                console.log(changes);
            }, null, "arrayChange");

            people = myArray;
        };

        ko.applyBindings(new viewModel());
    });
</script>

It binds the data correctly, but I never get any changes logged when editing the zip code lines on the page. Any idea how I can amend or rewrite the code to be able to trap those changes?

Ultimately I want to add only changed lines into a json array to post back server side.

Thank you.

Answer 1

By default you won't get notifications at the observableArray level here. The reason why is the observableArray is only concerned with the items in it's catalog, not whether the properties on those items are changing or not.

If you want to watch for changes you could do this -

var myArray = ko.observableArray(result);
ko.utils.arrayForEach(myArray(), function (thisItem) {
    thisItem.subscribe(function (changes) {
        console.log(changes);
    });
});

people = myArray;

This will subscribe to each individual object in the observableArray and fire whenever a property on that object changes.

Answer 2

This will work if the array itself changes, but to track changes to objects inside the array, you should have an array of observables...

This example on the Knockout site should help you along:
http://knockoutjs.com/examples/contactsEditor.html