2017-10-08 4 views
0

J'ai une table de données que je veux mettre à jour dynamiquement.Ember - Initialisation des données de table à partir de données-braises puis mise à jour via socket Web

Lorsque l'utilisateur accède à la page, je souhaite initialiser la table avec les données du backend de mon rail. Facile avec le crochet de modèle et les données de braise. Je veux ensuite garder cette information rafraîchie en utilisant le flux websocket connecté.

Comment dois-je gérer cela. Devrais-je mettre à jour le modèle avec les mises à jour websocket (sans valider les données au backend)? Les données de la table sont un tableau d'objets dans le composant, devrais-je juste initialiser cela à partir de la fonction modelController du modèle puis garder le tableau mis à jour directement?

Existe-t-il un moyen facile de mapper les données JSON WebSocket dans le modèle ou tableau tableau?

Répondre

0

Oui, vous devriez être capable de le faire avec Ember Data. Avertissement: je n'ai pas essayé ça.

Quelque part vous ouvrez votre flux websocket et ajoutez un gestionnaire "onmessage". Dans ce gestionnaire, vous recevrez la charge utile du serveur, où vous pouvez utiliser store.pushPayload() pour mettre à jour l'enregistrement dans le magasin. Si l'enregistrement (identifié par le champ id) est déjà dans le magasin, il sera remplacé. Sinon, il sera ajouté en tant que nouvel enregistrement. Si vous affichez l'enregistrement dans le modèle actuel, vous devriez juste voir les valeurs changer quand le nouvel enregistrement est poussé.

This Ember guide page décrit ce scénario dans lequel vous diffusez des données en continu à partir du serveur et que vous souhaitez voir des mises à jour instantanées de l'interface utilisateur. Lecture supplémentaire: the API for pushPayload

+0

J'ai réussi à faire exactement cela. Cela fonctionne bien, sauf que le sérialiseur est lié au modèle. Le backend donne un format de JSON et le websocket quelque chose de différent. J'ai renoncé à m'inquiéter à ce sujet et j'ai juste changé le format du websocket. –

+0

Si vous ne voulez pas le sérialiseur, vous pouvez utiliser 'store.push()' plutôt que 'store.pushPayload()'. –