Question

使用Meteor，我想要添加到列表中的新项目淡入。但是，我不希望列表中的每个元素在添加内容时缓慢淡入，只需添加新元素。 / p>

我有以下由服务器发布并在客户端订阅的集合

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时，会为列表中的每个项调用此函数，而不是仅针对单个新项。

Answer 1

我不确定你应该直接打电话给Meteor.defer，我在文档中找不到它。此外，setTimeout和setInterval的流星版本似乎没有正常工作，延迟只是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()
  }
}

Meteor如何仅为添加到Collection的项调用客户端js函数

1 个答案: