анимированный переход нокаутjs на обновлении элемента

Question

Анимированные переходы на шаблоны с knockoutjs работают очень хорошо, если вы добавляете или удаляете элемент из наблюдаемого массива. но как я могу захватить обновление.

В настоящее время для обновления элемента я просто заменить элемент в массиве таким образом:

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)) 

анимированного переход будет видеть это как удалить и вставку. Как бы я отличил обновление?

веселит,

Answer 1

так вот решение с использованием пользовательских привязок

вместо использования замены:

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

Это хорошо работает для простого объекта. Но более крупный объект может быть лучше использовать плагин сопоставления. Дело в том, что я больше не заменяю элемент массива, поэтому переход шаблона «addAfter» и «beforeRemove» не запускается.

Свойства заголовка и содержимого являются наблюдаемыми объектами. Таким образом, чтобы справиться с переходом Обновление элемента массива я использовать пользовательские привязки, который выглядит следующим образом:

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

это сравнивает исходное значение и против обновляется. Если у кого-то есть лучшее решение, я бы очень признателен, если вы разместите его здесь.

ура.