Question

我想在收藏品更改时显示脉冲转换。

在我的html文件中，我有：

<template name="menuItemTag">
    <div class="app-menu-item-tag ui label">{{ count }}</div>
</template>

在我的js文件中，我公开了我的模板的count变量：

Template.menuItemTag.count = function() {
    return MyCollection.find().count();
};

在更新集合时，ui中的计数会发生变化。

现在，我希望每次计数值改变时在div标签上显示一个脉冲转换。

我尝试使用cursor.observe

Template.menuItemTag.rendered = function() {
    MyCollection.find().observe({
        added: function (id, user) {
            $('.app-menu-item-tag:nth(0)').transition('pulse');
        },
        removed: function () {
            $('.app-menu-item-tag:nth(0)').transition('pulse');
        }
    });
};

不幸的是，第一次呈现模板时调用的次数太多了。如果我最初在我的收藏中有40个项目，那么转换将播放40次......

是否有一种干净的方式来对变化进行ui转换并避免收集初始化？

Answer 1

试试这个：

Template.menuItemTag.count = function() {
    return Session.get('count');
};

Template.menuItemTag.rendered = function() {
    this.countComputation = Deps.autorun(function() {
        Session.set('count', MyCollection.find().count());
        $('.app-menu-item-tag:nth(0)').transition('pulse');
    });
};

Template.menuItemTag.destroyed = function() {
    this.countComputation.stop();
};

Answer 2

感谢您的回答，我仍然对集合的初始化有问题。

我建议在下面推迟第一个动画实用程序，该集合将被完全填充：

Template.menuItemTag.count = function() {
    return Session.get('count');
};

Template.menuItemTag.rendered = function() {
    var that = this;
    this.countComputation = Deps.autorun(function() {
        Session.set('count', MyCollection.find().count());

        // Cancel playing UI transition. The collection is not completely initialized
        if (that.handleTimeout) {
            Meteor.clearTimeout(that.handleTimeout);
        }

        // Play the UI transition without the timeout if the collection is initialized
        if (that.noNeedTimeoutAnymore) {
            $('.app-menu-item-tag:nth(0)').transition('pulse');
        }
        // Tentative to play the UI transition during the collection feeding
        else {
            that.handleTimeout = Meteor.setTimeout(function() {
                $('.app-menu-item-tag:nth(0)').transition('pulse');
                // At this point we know that the collection is totaly initialized
                // then we can remove the timeout on animation for the future update
                that.noNeedTimeoutAnymore = true;
            }, 1500); // You can adjust the delay if needed
        }
    });
};

Template.menuItemTag.destroyed = function() {
    this.countComputation.stop();
};

是否可以显示UI转换以反映meteorjs集合中的更改？

2 个答案: