Question

如果要从observableArray添加或删除元素，使用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");
           }
       }
   };

然后将原始值与更新后的值进行比较。如果有人有更好的解决方案，我真的很感谢你在这里发布。

欢呼声。

knockoutjs动画过渡更新元素

1 个答案: