Subscribe To Observable Array For New Or Removed Entry Only

So yes I can subscribe to an observable array: vm.myArray = ko.observableArray(); vm.myArray.subscribe(function(newVal){...}); The problem is the newVal passed to the function is

Solution 1:

As of KnockoutJS 3.0, there's an arrayChange subscription option on ko.observableArray.

var myArray = ko.observableArray(["Alpha", "Beta", "Gamma"]);

myArray.subscribe(function(changes) {

    // For this example, we'll just print out the change infoconsole.log(changes);

}, null, "arrayChange");

myArray.push("newitem!");

In the above callback, the changes argument will be an array of change objects like this:

[ 
   { 
      index: 3, 
      status: 'added', 
      value: 'newitem!' 
   }
]

For your specific problem, you want to be notified of new or removed items. To implement that using Knockout 3, it'd look like this:

myArray.subscribe(function(changes) {

    changes.forEach(function(change) {
        if (change.status === 'added' || change.status === 'deleted') {
            console.log("Added or removed! The added/removed element is:", change.value);
        }
    });

}, null, "arrayChange");

Solution 2:

Since I couldn't find any info on this elsewhere, I'll add a reply for how to use this with TypeScript.

The key here was to use the KnockoutArrayChange interface as TEvent for subscribe. If you don't do that, it'll try to use the other (non-generic) subscribe and will complain about status, index, and value not existing.

classZoneDefinition {
    Name: KnockoutObservable<String>;
}

classDefinitionContainer
{
    ZoneDefinitions: KnockoutObservableArray<ZoneDefinition>;
    constructor(zoneDefinitions?: ZoneDefinition[]){
        this.ZoneDefinitions = ko.observableArray(zoneDefinitions);
        // you'll get an error if you don't use the generic version of subscribe// and you need to use the KnockoutArrayChange<T> interface as Tthis.ZoneDefinitions.subscribe<KnockoutArrayChange<ZoneDefinition>[]>(function (changes) {
            changes.forEach(function (change) {
                if (change.status === 'added') {
                    // do something with the added value// can use change.value to get the added item// or change.index to get the index of where it was added
                } elseif (change.status === 'deleted') {
                    // do something with the deleted value// can use change.value to get the deleted item// or change.index to get the index of where it was before deletion
                }
            });
        }, null, "arrayChange");
}

Solution 3:

In order to only detect push() and remove() events, and not moving items, I put a wrapper around these observable array functions.

var trackPush = function(array) {
    var push = array.push;
    returnfunction() {
        console.log(arguments[0]);
        push.apply(this,arguments);
    }
}
var list = ko.observableArray();
list.push = trackPush(list);

The original push function is stored in a closure, then is overlayed with a wrapper that allows me do do anything I want with the pushed item before, or after, it is pushed onto the array.

Similar pattern for remove().

Solution 4:

I am using a similar but different approach, keep track whether an element has been instrumented in the element itself:

myArray.subscribe(function(array){
  $.each(array, function(id, el) {
    if (!el.instrumented) {
      el.instrumented = true;
      el.displayName = ko.computed(function(){
        var fn = $.trim(el.firstName()), ln = $.trim(el.lastName());
        if (fn || ln) {
          return fn ? (fn + (ln ? " " + ln : "")) : ln;
        } else {
          return el.email();
        }
      })
    }
  });
})

But it is really tedious and the pattern repeated across my code

Solution 5:

None that I know of. Wanna know what I do? I use a previous variable to hold the value, something called selectedItem

vm.selectedItem = ko.observable({});
functionaddToArray(item) { vm.selectedItem(item); vm.myArray.push(item); }

So that way, when something happens to my observable array, I know which item was added.

vm.myArray.subscribe(function(newArray) { var addedItem = vm.selectedItem(item); ... }

This is really verbose, and assuming your array holds many kinds of data, you would need to have some sort of flags that helps you know what to do with your saved variables...

vm.myArray.subscribe(function(newArray) {
  if ( wasUpdated )
    // do something with selectedItemelse// do whatever you whenever your array is updated
}

An important thing to notice is that you might know which item was added if you know whether push or unshift was used. Just browse the last item of the array or the first one and voila.