In Meteor, come si visualizzano i dati appena inseriti come in grigio finché non vengono confermati dal server?

Question

Supponiamo che la mia applicazione abbia un elenco di elementi di qualche tipo e che gli utenti possano inserire nuovi elementi nell'elenco.

Che cosa fa normalmente Meteor: quando un utente inserisce un elemento nell'elenco, viene immediatamente visualizzato nel browser, senza attendere la conferma del server.

Quello che voglio è: quando un articolo è in questo stato (inviato ma non ancora riconosciuto dal server), appare nella sua posizione corretta nell'elenco, ma in grigio.

C'è un modo per farlo fare a Meteor?

Answer 1

Sicuro. Fai un metodo che fa l'inserimento. Quando il metodo è in esecuzione, fare controllare se è in esecuzione in simulazione e, in tal caso, impostare un flag "temporaneo" o "non confermato" sull'elemento inserito. Usalo per decidere se rendere l'oggetto in grigio.

si Supponendo che state usando MongoDB:

// Put this in a file that will be loaded on both the client and server 
Meteor.methods({ 
    add_item: function (name) { 
    Items.insert({name: name, 
        confirmed: !this.isSimulation}); 
    } 
}); 

chiamata al metodo:

Meteor.call("add_item", "my item name"); 

Questo è tutto quello che devi fare. Il motivo per cui questo funziona è che una volta che il server ha finito di salvare l'oggetto, le modifiche locali (simulate) sul client verranno annullate e sostituite con qualsiasi cosa realmente accaduta sul server (che non includerà il flag "non confermato").

Quanto sopra è il modo più semplice per farlo, ma si tradurrà in tutti i record nel database con un vero e proprio 'confermato'. Per evitare ciò, imposta l'attributo confermato solo se è falso.

Fare riferimento a questa parte della documentazione per ulteriori informazioni su isSimulation e Meteor.methods

Answer 2

Questo è quello che ho aggiunto un osservatore sul lato server, ho creato una variabile chiamata notificare falso dal lato client stesso una volta che la il server riceve l'udpate che renderà la notifica true e il client verrà aggiornato sullo stesso.

Collection.find({"notify":false}).observe({ 
    "added" : function(first){ 
     collection.update({"_id":first._id},{$set : {"notify":true}}); 
    } 
});