1

当我的收藏发生变化时，我想显示一个脉冲转换。

在我的 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 转换并避免集合初始化？

4

2 回答 2

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();
};
于 2014-04-17T17:35:05.577 回答
0

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

我在下面建议推迟第一个动画，因为集合将被完全填满：

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();
};
于 2014-04-29T15:34:06.480 回答