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 的流星版本似乎无法正常工作，而 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 回答