4

ユーザーが投稿したコメントのリアクティブ {{#each}} で新しい要素をフェードインしようとしています。

https://gist.github.com/3119147に非常に単純なコメント セクションのコード サンプルがあります(テキストエリアと新しいコメント挿入コードは含まれていませんが、非常にボイラープレートです)。私が与える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.*関数を呼び出す必要があるため、アニメーションはそれらのいずれかを延期します。ただし、Meteor は、異なるコレクション (Likes) が挿入されるTemplate.individual_comment.postedago_str()たびに呼び出しています。これは、[いいね] ボタンをクリックすると、コメントのリスト全体が白く点滅してフェードインすることを意味します (非常に面倒です!)。

Meteor のドキュメントを読み、チャンクのみが更新されるようにテンプレートをより適切にスライスする方法を見つけようとしました。妥当と思われるすべての場所に id="" 属性を追加しましたが、それでもこのバグです。何が起こっているか知っている人はいますか？

ティア！

4

1 に答える 1

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;
于 2013-02-10T22:54:36.223 に答える