javascript - meteor :删除帖子，并使用 _uihooks 为其他帖子设置动画

Question

在 Meteor 中，当我从收藏夹中删除帖子时，我希望该帖子下的帖子向上滑动，取代已删除帖子的位置。

我读到我应该使用 _uihooks 来执行此操作，但我不确定如何实现它。

有人可以帮助我吗，可能是来自 Meteorpad 的简单示例？

Answer 1

您要实现的目标非常简单，您实际上并不需要第 3 方库来实现。我想这里唯一的问题是 _uihooks 没有很好的文档记录，所以您几乎只能靠自己来弄清楚它是如何工作的。

例子

总体思路如下:

Template.body.onRendered(function() {
    var container = this.$('.ui.page.grid')[0];
    container._uihooks = {
        insertElement: function(node, next) {
            // this is the default behavior
            container.insertBefore(node, next);
        },
        removeElement: function(node) {
            var $node = $(node);
            $node.removeClass('visible');
            // can't use Meteor.setTimeout here because
            // it will complain about setting timeouts
            // inside simulations ...
            setTimeout(function() {
                $node.remove();
            }, 1000);
        },
    };
});

还有另一个名为 movedElement 的钩子(Hook)，但您可能不需要它就知道了。

所以基本上，您需要获取一个容器元素，该元素将“监听”其子数组中的变化。当插入或移除元素时，将调用相应的钩子(Hook)。 node 和 next 参数分别表示感兴趣的元素和他的下一个兄弟。

为给定的操作定义一个钩子(Hook)，防止默认行为发生，所以你独自负责插入/删除元素。但这很好，因为您有机会在完全摆脱元素之前执行相应的动画。这里使用附加到 visible 类的 css 动画。

要查看它在实践中的工作原理，请转到此处:

http://uihooks-example.meteor.com

进一步阅读

示例的源代码在 GitHub 上可用:

https://github.com/apendua/uihooks-example

如果您想更好地理解 _uihooks API 的真正工作原理，请在此处查看 Meteor 的源代码:

https://github.com/meteor/meteor/blob/devel/packages/blaze/domrange.js

陷阱

insertElement 在最初呈现元素时不会被调用。因此，如果您计划在插入新元素时执行动画，请务必考虑到这一点。