2012-04-25 12 views
7

Con Meteor, voglio aggiungere nuovi elementi a una lista per la dissolvenza in apertura. Tuttavia, non desidero che ogni elemento della lista sbiadisca lentamente quando qualcosa viene aggiunto, solo il nuovo elemento che viene aggiunto.Meteor come richiamare la funzione js del client solo per l'elemento aggiunto alla raccolta

Ho la seguente raccolta pubblicata dal server e sottoscritto sul client

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


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

ho la seguente configurazione:

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

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

Vorrei chiamare il seguente, quando un nuovo elemento è inserito in una raccolta:

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

Ho provato a utilizzare

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

Tuttavia, la funzione viene chiamata per ogni elemento dell'elenco quando viene aggiunto un nuovo list_item, e non solo per il singolo nuovo elemento.

+0

ho visto questo che ha suggerito di osservare: http://stackoverflow.com/questions/10274679/invoke-a-client-js-function-in-meteor-after-getting-results-from- the-server Ho visto anche questo: http://stackoverflow.com/questions/10109788/callback-after-the-dom-was-updated-in-meteor-js Tuttavia, con entrambi i metodi, tutti gli elementi sono sbiadito, invece che solo l'ultimo elemento inserito. –

+0

Hai trovato qualche soluzione? –

+0

No, anche se non ho provato in mesi ... –

risposta

4

Non sono sicuro che dovresti chiamare Meteor.defer direttamente, non riuscivo a trovarlo nei documenti. Inoltre, le versioni di meteore di setTimeout e setInterval non sembrano funzionare correttamente e rinviare è solo un wrapper per Meteor.setTimeout(fn(), 0) Comunque ho ottenuto quello che pensa che si desidera lavorare:

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

Grazie, proverò e ti risponderò ... –

+0

Non ha funzionato per me :( –

Problemi correlati