dom – Meteor：当我插入CollectionB时,CollectionA中的元素重新渲染

我试图在用户发布的评论的被动{{#each}}中淡入新元素.

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

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.*函数,这就是为什么我的动画会推迟其中一个.但是,每次插入不同的集合(Likes)时,Meteor都会调用Template.individual_comment.postedago_str().这意味着我单击Like按钮,我的整个注释列表闪烁白色并淡入(非常烦人！).

我阅读了Meteor文档并尝试弄清楚如何更好地切片我的模板以便只更新块,并且我在任何地方添加了id =“”属性,这似乎是合理的..仍然是这个bug.有谁知道发生了什么？

TIA！

解决方法

作为一种解决方法,您可以在单个注释上围绕新类封装{{if}}块,这将检查注释的创建时间,并且如果注释实际上是最近的,则仅在第一个位置添加新类.就像是：

<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;