Menu
With Meteor, I want new items that are added to a list to fade in. However, I don't want every element in the list to fade in slowly when something is added, only the new element that is added.
I have the following Collection published by the server and subscribed 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 element is inserted into a Collection:
function (item) {
var sel = '#' + item._id;
Meteor.defer(function () {
$(sel).fadeIn();
});
}
I have 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, rather than only for the single new item.
271
Each document is a EJSON object. It includes an _id property whose value is unique in the collection, which Meteor will set when you first create the document.
By default, Meteor automatically publishes every document in your collection to each connected client. To turn this behavior off, remove the autopublish package, in your terminal: and instead call Meteor.publish to specify which parts of your collection should be published to which users.
Meteor stores data in collections. To get started, declare a collection with new Mongo.Collection. Constructor for a Collection The name of the collection. If null, creates an unmanaged (unsynchronized) local collection. The server connection that will manage this collection.
To call into JS from .NET, inject the IJSRuntime abstraction and call one of the following methods: 1 IJSRuntime.InvokeAsync 2 JSRuntimeExtensions.InvokeAsync 3 JSRuntimeExtensions.InvokeVoidAsync
I'm not sure you're supposed to call Meteor.defer directly, I couldn't find it in the docs. Also, the meteor versions of setTimeout and setInterval don't seem to be working properly and defer is just a wrapper around Meteor.setTimeout(fn(), 0) Anyway I got what I think you want working:
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()
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
