More `refreshAll`-like primitive operations that are smarter about operations performed


I posted this in Slack a few days ago but wanted to continue the discussion. TL;DR of that conversation: the refreshAll method of Observable over-eagerly deletes items and creates new items instead of updating in certain scenarios.

Example - removing the middle item of the following list (using the id field as the comparator)…

var list = [
  { id: 0, text: 'Item 0', completed: false },
  { id: 1, text: 'Item 1', completed: false },
  { id: 2, text: 'Item 2', completed: false }

…will result in:

item id 0 is updated
the second item is _replaced_ with a _newly created_ item with id 2

(it hits this line)

Rather, my expectation would be:

item id 0 is updated
item id 1 is removed
item id 2 is updated

Generally, that tends to be fine because the right items end up in the list, but if you use RemovingAnimations and AddingAnimations in conjunction with refreshAll, you end up with some pretty silly animations.

It got me thinking that there might be a need for a couple more Observable primitive operations. Two I can think of are:

  • a variant of refreshAll for when you’re just adding and deleting items (WIP version I’m testing here)
  • a variant of refreshAll for when you’re just changing the order of items

Does anybody else see a need for these (or is this just a problem I’m having)? If there is a need, I’m happy to discuss requirements and submit a PR.



Hey Atish,

huge thanks for reporting on this here. The challenge of reordering lists is much more complicated than it might appear on the surface, and likely one that not only needs a new function on Observable.js, but also more behind-the-scenes work on Each and associated nodes.

The need for this, however, is crystal clear and some work is being done on that already. You can follow the progress in this PR.