J'ai un modèle, task_list , qui ressemble à ceci:
{{#each tasks}} {{> task}} {{/each}}
Template.task_list.tasks renvoie une collection et dans l'ui, il semble prendre un peu de temps pour charger.
Pendant la chargement de la collection, j'aimerais montrer un indicateur de chargement.
Des idées sur la façon dont je pourrais pouvoir le faire?
BTW, j'ai essayé l'événement rendered des modèles sur le modèle task_list, mais il est déclenché avant que la liste ne soit effectivement chargée. J'ai également essayé d'utiliser le rendered sur le modèle de task , mais il semble ne jamais être appelé.
Mise à jour de Meteor 1.0.4 : Maintenant que les abonnements au niveau du modèle sont disponibles et le modèle préféré pour utiliser iron: router ou les abonnements autonomes,
Il existe une fonction complémentaire
Template.instance().subscriptionsReady()qui renvoie vrai lorsque toutes les abonnements appelés avecthis.subscribesont prêts.À l'intérieur du code HTML du modèle, vous pouvez utiliser le
Template.subscriptionsReadyintégré, qui est un motif simple pour afficher les indicateurs de chargement dans vos modèles lorsqu'ils dépendent des données chargées à partir des abonnements.
Exemple:
Template.notifications.onCreated(function () { // Use this.subscribe inside onCreated callback this.subscribe("notifications"); }); <template name="notifications"> {{#if Template.subscriptionsReady}} <!-- This is displayed when all data is ready. --> {{#each notifications}} {{> notification}} {{/each}} {{else}} Loading... {{/if}} </template>
C'est mieux que d'avoir un modèle de chargement générique pour la page entière, car la section de chargement est localisée sur la partie de la page qui possède réellement de nouvelles données.
Pre-Meteor 1.0.4 :
L'idée est de passer une fonction Meteor.subscribe à Meteor.subscribe :
Meteor.subscribe('tasks', function onReady() { Session.set('tasksLoaded', true); });
Ensuite, modifiez votre modèle en fonction de la variable de session tasksLoaded . Dans le client JavaScript:
Template.task_list.helpers({ tasksLoaded: function () { return Session.get('tasksLoaded'); } });
Dans votre modèle:
<template name="task_list"> {{#if tasksLoaded}} {{#each tasks}} {{> task}} {{/each}} {{else}} <img src="http://viewvc.svn.mozilla.org/vc/addons/trunk/bandwagon/skin/images/spinner.gif?revision=18591&view=co&pathrev=18591"> {{/if}}
MISE À JOUR : Avec le routeur de fer, vous avez une option directe pour spécifier un modèle de loading qui sera affiché pendant la souscription.
La réponse de Dan a été définitivement sur place, mais je tiens à rappeler que je crois que le paquet de publication automatique doit être supprimé pour qu'il fonctionne réellement.
meteor remove autopublish
De plus, je recommande le paquet de spin pour un spinner agréable.
Il y a eu de beaux paquets lancés entre-temps. Découvrez ces deux:
Ils travaillent tous les deux à peu près hors de la boîte, regardez leur documentation pour des options plus avancées.