Dans Meteor, comment puis-je afficher en grisé les données nouvellement insérées jusqu'à ce qu'elles soient confirmées par le serveur?

Question

Supposons que mon application possède une liste d'éléments, et que les utilisateurs peuvent insérer de nouveaux éléments dans la liste.

En règle générale, Meteor agit comme suit: lorsqu'un utilisateur insère un élément dans la liste, celui-ci apparaît immédiatement dans son navigateur, sans attendre la confirmation du serveur.

Ce que je veux, c'est: lorsqu'un élément se trouve dans cet état (soumis mais que le serveur ne l'a pas encore reconnu), il apparaît à l'emplacement correct dans la liste, mais estompé.

Y a-t-il un moyen de faire que Meteor fasse cela?

Answer 1

Assurez-vous. Faire une méthode qui ne l'insertion. Lorsque la méthode fonctionne, vérifier pour voir si elle est en cours d'exécution dans la simulation, et, dans l'affirmative, de définir un "temporaire" ou "non confirmées" drapeau sur l'élément inséré. L'utiliser pour décider si le rendu de l'élément grisé.

En supposant que vous êtes en utilisant 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});
  }
});

L'appel de la méthode:

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

C'est tout ce que vous devez faire. La raison pour laquelle cela fonctionne est que une fois que le serveur a terminé l'enregistrement de l'élément, de la section locale (simulée) des changements sur le client sera retiré et remplacé avec tout ce qui s'est réellement passé sur le serveur (ce qui n'inclut pas le "non confirmées" pavillon.)

Le ci-dessus est la façon la plus simple de le faire, mais cela va dans tous les les enregistrements de votre base de données ayant un 'confirmé' attrbiute de vrai. Pour éviter cela, réglez la confirmation de l'attribut si c'est faux.

Reportez-vous à cette partie de la documentation pour plus d'informations sur l' isSimulation et Meteor.methods

Answer 2

C’est ce que j’ai ajouté en ajoutant un observateur côté serveur, j’ai créé une variable appelée notify false du côté client lui-même une fois que le serveur a reçu l’update qu’il fera notify et que le client sera mis à jour de la même manière.

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