dom - meteor :当我插入到集合 B 时，集合 S 中的元素会重新呈现

Question

我试图在用户发布的评论的 react 性 {{#each}} 中淡入新元素。

我在 https://gist.github.com/3119147 有一个代码示例一个非常简单的评论部分(不包括 textarea 和新的评论插入代码，但它非常样板。)。包括我给 .comment.fresh { opacity: 0; } 的 CSS 片段，然后在我的脚本中，我有:

Template.individual_comment.postedago_str = function() {
  var id = this._id;
  Meteor.defer(function() {
    $('#commentid_'+id+'.fresh').animate({'opacity':'1'}, function() {
      $(this).removeClass('fresh');
    });
  });
  return new Date(this.time).toString();
};

这似乎是一个执行动画的可怕地方。我的想法是，每次渲染新评论时，都需要调用我所有的 Template.individual_comment.*函数，所以这就是为什么我的动画推迟了其中之一。然而，Meteor 正在调用 Template.individual_comment.postedago_str()每次插入不同的集合(喜欢)。这意味着我单击“赞”按钮，我的整个评论列表会闪烁白色并逐渐消失(非常烦人!)。

我阅读了 Meteor 文档并试图弄清楚如何更好地分割我的模板，以便只有块会更新，并且我在所有看起来合理的地方添加了 id=""属性......仍然是这个错误。有谁知道这是怎么回事？

蒂亚!

Answer 1

作为解决方法，您可以包装 {{if}}围堵fresh个人评论的类，这将检查评论的创建时间并只添加 fresh如果评论实际上是最近的，则首先分类。就像是:

<div class="comment{{#if isActuallyFresh}} fresh{{/if}}" id="commentid_{{_id}}">

然后定义 isActuallyFresh 函数:

Template.individual_comment.isActuallyFresh = function() {
  if ((new Date().getTime() - this.time) < 300000) // less than 5 minutes old
     return true;
  else
     return false;