2012-04-25 13 views
7

Con Meteor, quiero que los elementos nuevos que se agregan a una lista se desvanezcan. Sin embargo, no quiero que cada elemento de la lista se desvanezque lentamente cuando algo se agrega, solo el nuevo elemento que se agrega.Meteor cómo invocar la función js del cliente para solo el elemento agregado a la Colección

Tengo el siguiente colección publicada por el servidor y suscrito en el cliente

List = new Meteor.Collection("List"); 


Meteor.autosubscribe(function() { 
    Meteor.subscribe('list'); 
}); 

tengo la siguiente plantilla:

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

<template name"list_item"> 
    {{ text }} 
</template> 

me gustaría llamar al siguiente cuando un nuevo elemento es insertado en una colección:

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

He intentado usar

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

Sin embargo, la función es llamada para cada elemento de la lista cuando se añade un nuevo list_item, y no sólo para el nuevo elemento individual.

+0

he visto este sugirió que observar: http://stackoverflow.com/questions/10274679/invoke-a-client-js-function-in-meteor-after-getting-results-from- el servidor También he visto esto: http://stackoverflow.com/questions/10109788/callback-after-the-dom-was-updated-in-meteor-js Sin embargo, con ambos métodos, todos los elementos son desvanecido, en lugar de solo el último elemento insertado. –

+0

¿Has encontrado alguna solución? –

+0

No, aunque no lo he intentado en meses ... –

Respuesta

4

No estoy seguro de que deba llamar a Meteor.defer directamente, no pude encontrarlo en los documentos. Además, no parece que las versiones de meteoros de setTimeout y setInterval estar funcionando correctamente y diferir es sólo una envoltura alrededor de Meteor.setTimeout(fn(), 0) De todos modos me dieron lo que piensa que quiere trabajar:

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

Gracias, intentaré esto y me pondré en contacto con usted ... –

+0

No funcionó para mí :( –

Cuestiones relacionadas