Question

我有一个名为'log'的集合。在应用程序的整个生命周期中，日志会重复填充，例如：

12:15 - User xyz doing something
12:13 - Server doing something
12:12 - Server starts

...等

这是一个简单的发布/订阅机制，没有添加任何内容。模板只循环遍历集合的每个元素，并根据需要对其进行格式化。每条线都在一个div中，便于造型。

我想添加一个淡化效果。我尝试将fadein添加到div（来自boostrap），并且每次收集更改时它都适用于所有元素，也就是说，Meteor重新呈现整个模板而不是“添加”新元素到div列表。

有没有办法在流星中做到这一点？

谢谢

Answer 1

我不想回答我自己的问题，但解决方法如下。我希望它可以帮到某人：

在把手中：

<div id="{{_id}}" class="logItem fade-class">
  <span>{{logItem}}</span>
</div>

在Template.js中：

Template.myTemplate.preserve({
  '.item[id]': function (node) { return node.id; }
});

瞧！

Answer 2

Meteor重新渲染模板，但DOM元素仍然保留。你只需要标记它们，这样你就不会再次触发淡入淡出：

Template.list.rendered = function() {
    _.each(this.findAll('.item'), function(element) {
        if($(element).data('faded')) return;
        $(element).data('faded', true);

        $(element).fadeIn(); // Or whatever you like here
    });
};

输入每一行时如何淡入文本？

2 个答案: