流星如何调用客户端js函数，仅用于添加到Collection中的项目

2018-06-21 00:01:32

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

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

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

我不确定你应该直接打电话给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()
  }
}

链接地址: http://www.djcxy.com/p/58985.html

上一篇: Meteor how to invoke client js function for only item added to Collection

下一篇: Convert specific time format to in PHP to MYSQL datetime type