Question

It seems Knockout’s convenient “afterRender” method on foreach bindings only fires when data is added, and not removed.

You can test that here – http://jsfiddle.net/farina/4BaXs/1/ by clicking load initial, seeing the four alerts, then clicking load delete and notice nothing happens.

So, to solve this problem I decided to attempt to create a manual subscription to my ko.mapping.fromJS array, but that just results in a call every time I update the data from AJAX, even if the data hasn’t changed.

I feel like the mapping plugin is somehow failing, and thinking that the data is always new, even when it is not.

Is there some sort of event which only occurs when the array has changed? My subscriptions on individual items work as expected, but obviously you can’t subscribe to an entire list of items?

Answer 1

I wrote up a function that uses ko.utils.compareArrays to figure out what has changed. compareArrays is also used by the foreach binding. I also took your example and updated it to use this function. Here it is:

ko.subscribable.fn.subscribeArrayChanged = function(addCallback, deleteCallback) {
    var previousValue = undefined;
    this.subscribe(function(_previousValue) {
        previousValue = _previousValue;
    }, undefined, 'beforeChange');
    this.subscribe(function(latestValue) {
        var editScript = ko.utils.compareArrays(previousValue, latestValue);
        for (var i = 0, j = editScript.length; i < j; i++) {
            switch (editScript[i].status) {
                case "retained":
                    break;
                case "deleted":
                    if (deleteCallback)
                        deleteCallback(editScript[i].value);
                    break;
                case "added":
                    if (addCallback)
                        addCallback(editScript[i].value);
                    break;
            }
        }
        previousValue = undefined;
    });
};