流星#each：动画的新项目

Question

进入我有我使用学习流星简单的聊天应用程序。我非常喜欢在我见过的其他聊天平台上淡化新消息的美感。

基本上，我想要一个优雅的解决方案淡入我的#each块中的新数据行。

这是我已经试过：

{{#each messages}} 
    <li class="message"> {{ username }} says: {{ message }} </li> 
{{/each}} 

---

Tracker.autorun(function() { 
    Messages.find(); //reactive data dependency. 
    $('li.message:last-child').hide().fadeIn(); 
} 

但问题是，它只有在秒淡出持续li.message。我认为这是因为在DOM交互完成之前自动运行正在运行。

难道我连这样的权利？有没有办法在#each帮手中动画新的数据行？

我看了this answer但似乎依靠用户点击事件。我更喜欢非交互式版本。

在此先感谢。

Answer 1

我找到了一个完美的解决方案;事实上，我不知道为什么我没有早点想到这一点。但是，如果某人有很好的贡献，我会等一会儿接受我自己的答案。

本质上，我的解决方案是将#each块中的内容封装在不同的模板中，并使用该模板的rendered挂钩来应用我的jQuery动画。

{{#each messages}} 
    {{>message}} 
{{/each}} 

.... 

<template name="message"> 
    <li class="message"> {{ username }} says: {{ message }} </li> 
</template> 

---

Template.message.rendered = function() { 
    this.$(".message").hide().fadeIn(500); 
}