7

Meteor では、リストに追加された新しい項目をフェードインさせたいと考えています。ただし、何かが追加されたときにリスト内のすべての要素がゆっくりとフェードインするのではなく、追加された新しい要素だけがフェードインするようにしたいと考えています。

サーバーによって公開され、クライアントで購読されている次のコレクションがあります

List = new Meteor.Collection("List");


Meteor.autosubscribe(function () {
  Meteor.subscribe('list'); 
});

次のテンプレートがあります。

<template name="list">
  {{#each list}}
    {{> list_item }}
  {{/each}}
</template>

<template name"list_item">
  {{ text }}
</template>

コレクションに新しい要素が挿入されたときに、次のように呼び出したいと思います。

function (item) {
  var sel = '#' + item._id;
  Meteor.defer(function () {
    $(sel).fadeIn();
  });
}

使ってみました

List.find().observe({
  added: function (list_item) {
    var sel = '#' + list_item._id;
    Meteor.defer(function() {
      $(sel).fadeIn();
    });
  }
});

ただし、新しい list_item が追加されると、単一の新しい項目だけでなく、リスト内の各項目に対して関数が呼び出されます。

4

1 に答える 1

4

Meteor.defer を直接呼び出す必要があるかどうかはわかりません。ドキュメントで見つけることができませんでした。また、setTimeout と setInterval の meteor バージョンは適切に機能していないようであり、defer はラッパーにすぎMeteor.setTimeout(fn(), 0)ません。

html:

<body>
  {{> list_items}}
</body>

<template name="list_items">
  <ul>
    {{#each list_items}}
      <li id="list-item-{{_id}}" style="display:none;">
        {{text}}
      </li>
    {{/each}}
  </ul>
</template>

js:

List = new Meteor.Collection("List")

if (Meteor.is_client) {
  Meteor.subscribe("List")

  Meteor.autosubscribe(function(){
    List.find().observe({
      added: function(item){
        setTimeout("$('#list-item-"+item._id+"').fadeIn('slow')",10)
      }
    });
  });

  Template.list_items.list_items = function(){
    return List.find()
  }
}
于 2012-04-25T06:34:59.120 に答える