Question

Animated transitions on templates with knockoutjs work really well if you are adding or removing an element form an observableArray. but how would i capture an update.

Currently for updating an item I am simply replacing an item in the array like so:

var index = arrayFirstIndexOf(self.documents(), function (item) { return item.id === doc.Id });
self.documents.replace(self.documents()[index], new Document(doc.Id, doc.Title, doc.Content))

animated transition will see this as a remove and an insert. How would i distinguish an update?

cheers,

Answer 1

so here is a solution using custom bindings

instead of using a replace:

var index = arrayFirstIndexOf(self.documents(), function (item) { return item.id === doc.Id });
self.documents()[index].title(doc.Title).content(doc.Content);

This works well for a simple object. But a larger object may be better to use the mapping plugin. the point is, i am no longer replacing the array item hence the “addAfter” and “beforeRemove” template transition are not being fired.

The title and content properties are observable objects. So to handle the transition of an Update of an array item i use a custom binding that looks like:

   ko.bindingHandlers.highlightChange = {
       origValue : null,
       init: function (element, valueAccessor) {
           origValue = valueAccessor();
       },
       update: function (element, valueAccessor) {
           if (origValue !== valueAccessor())
           {
               $(element).hide().fadeIn("slow");
           }
       }
   };

this then compares the original value and against the updated.
If anyone has a better solution i would really appreciate you post it here.

cheers.