Notifying consecutive array changes

[tomalec]

I'm trying to notify dom-bind on array changes, with notifySplices, but I cannot get DOM aligned to my model.

Here is live example: http://jsbin.com/burako/2/edit?html,console,output

I modify array, outside of Polymer:

model.array.push({prop:"1"});
var removedItem = model.array.shift();
// ...
// notify `dom-bind` about it
domBind.notifySplices(
    "model.array", 
    [{
        object: model.array,
        index: 1, 
        addedCount: 1, 
        removed: 0,
        type: 'splice'
    }]
);
// ...
domBind.notifySplices(
    "model.array", 
    [{
        object: model.array,
        index: 0, 
        addedCount: 0, 
        removed: [removedItem],
        type: 'splice'
    }]
);

Then I end up with model = {array: [{prop:1}]} and nothing in the DOM.

[tomalec]

I've found in code doc:

   *   Note that splice records _must_ be normalized such that they are
   *   reported in index order (raw results from `Object.observe` are not
   *   ordered and must be normalized/merged before notifying).

So does it mean that not only "splice records" but also notifySplice calls need to be normalized/merged?

Could you then provide some rules what precisely this normalization means?

For example, do I get correctly that after 2 splices and one regular change
array = [item0, item1, item2, item3, item4, item5]

array.splice(3, 2, itemD);
array[4].prop = "new";
array.splice(2, 2, itemTwo, itemThree);

I should notify about 3 different ones, and normalize also notifyPathentry

array.splice(2, 1, itemTwo); 
array.splice(3, 1, itemThree);
array.splice(4, 1);
array[5].prop = "new";

?

[tomalec]

BTW, do you really want to keep such constraint? As I could imagine the case, when someone (component inside) may listen to changes to perform some animation. There will be no way to notify about the change that should animate push then shift from a list.

[warpech]

Is there a chance for fixing this?

[arthurevans]

@kevinpschaaf I'm trying to document notifySplices, would be good to get clarification on this point.

Is there a reference somewhere to what we mean by "normalized/merged"?

If this is not easily achievable, maybe we need to consider a 'forced update' method as has been requested in some other issues. I was able to do that using code like this:

var tmp = model.array.slice();
domBind.set('model.array', []);
domBind.async(function() {
  domBind.set('model.array', tmp);
});

Shouldn't there be an easier way to say , "This really isn't the same array anymore. Please throw away the backing collection and start over."?

[tomalec]

Thanks @arthurevans for support. Unfortunately, the method you proposed does not fit my case well, as it binds to a copy of an array, what breaks integration with other parts of an app.

[kevinpschaaf]

The "splices records must be normalized to be in index order" can be achieved using an algorithm used by the ObserveJS library from Polymer 0.5 days, which takes splices that happened to an array over time and re-projects them to an equivalent in-order set of splices.

That said, in Polymer 2.x it is now possible to just call this.notifyPath('myArray') without splice information to trigger e.g. dom-repeat to update, making the entire need for sending splice information moot in most cases.