Geek Answers Handbook

Meteor how to call client js function only for an item added to Collection

With Meteor, I want new items added to the list to disappear. However, I do not want each item in the list to slowly disappear when something was added, only a new item was added.

I have the following collection published by the server and signed on the client

List = new Meteor.Collection("List"); Meteor.autosubscribe(function () { Meteor.subscribe('list'); });

I have the following template:

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

I would like to call the following when a new item is inserted into the collection:

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

I tried using

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

However, the function is called for each item in the list when a new list_item is added, and not just for one new item.

+7
source share
1 answer

I am not sure what you should call Meteor.defer directly, I could not find it in the docs. Also, the versions of the setTimeout and setInterval meteorites do not seem to work properly, and putting it off is just a wrapper around Meteor.setTimeout(fn(), 0) In any case, I got what I think you need:

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() } }
+4
source

More articles:


All Articles