更新元素时的knockoutjs动画过渡

发布于 2025-01-03 16:45:34 字数 373 浏览 0 评论 0原文

如果您要添加或删除 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))

动画过渡会将其视为删除和插入。我如何区分更新？

干杯，

原文

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,

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乄_柒ぐ汐 2025-01-10 16:45:34

所以这里是一个使用自定义绑定

而不是使用替换的解决方案：

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");
           }
       }
   };

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

干杯。

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.

回复收藏 0 原文

~没有更多了~