Comment exécuter une fonction d'assistance après le DOM est prêt dans le météore

Meteor.démarrage

Meteor.startup() s'exécute une seule fois, de son exécution sur le client et le serveur. Ainsi, lorsque le navigateur charge et l'initiale DOM est prêt ou le serveur démarre. Comme Sohel Khalifa dit vous place de l'initialisation des fonctions ici. Ne pas définir des modèles ici parce que les modèles doivent être prêts avant cette fonction peut être tiré.

Modèle.monmodèle.onRendered(function() {... })

C'est exécutée lorsque le météore a fini et rendu le DOM. En outre exécuter chaque temps le code HTML des changements dans le modèle. Donc, pour chaque élément de votre liste en tête/une modification d'un élément/mise à jour,ainsi que de la liste, vous verrez la console.journal de retourner quelque chose si vous l'utilisez pour vérifier. Il sera de retour null/undefined lors de l'appel de données parfois (que je vais expliquer):

Est-ce à dire que tout le DOM est prêt? NON!:

Je pense que c'est ce qui pourrait vous causer un peu de mal. Si vous utilisez les Api externes tels que Google maps, ils pourraient encore rendre la carte. le Template.myTemplate.rendered() signifie Meteor a fini de rendre le modèle avec le réactif de variables nécessaires. Donc, pour savoir quand votre Google maps pourrait être prêt vous avez besoin de s'accrocher dans l'API Google maps. Avoir un regardez cette question

à l'Aide de Météore.abonnez-vous

La raison pour laquelle vous pourriez obtenir null/undefined tout en utilisant rendered est parce que c'est le processus de meteor généralement affiche les données dans les modèles de

Vous êtes essentiellement appel console.log(getMarkers()); avant que l'abonnement est terminé, c'est pourquoi vous obtenez null/undefined

Meteor utilise ce résumé du processus avec des modèles & réactifs de données:

1. Construire des Modèles de l'absence de données & rendez - AUCUNE donnée n'est encore à ce stade
2. Demander au serveur de données dans des collections
3. Reconstruire des modèles avec de nouvelles données & rendre

Donc, si le processus d'1) pour un très court laps de temps, vous n'avez pas de données pas encore, qui est pourquoi vous pourriez obtenir null (comme dans votre code) & à la première de rendre. Pour contourner cela, vous devez utiliser Meteor.subscribe'callback qui est exécuté lorsque toutes les données sont téléchargées à partir du serveur: e.g

Meteor.subscribe("lists", function() {
    //Callback fired when data received
});

Remarque: Avant d'utiliser cette fonction, vous devez lire la documentation sur l'utilisation de les abonnements que vous avez besoin pour retirer le autopublish package, ainsi que de faire un correspondant Meteor.publish fonction sur le serveur. Tout cela peut paraître fastidieux, vous pourriez finir par le faire de toute façon à donner à vos utilisateurs de leurs propres listes &/ou mettre en œuvre une sorte de sécurité.

Suggéré des modifications à votre code:

Vous faites DOM traversant la place, Template.mytemplate.onRendered(function().. mais vous avez aussi besoin de s'accrocher dans Google Maps API de capture lorsque leur carte est terminée dessin. Vous devez également utiliser Meteor.subscribe pour vous assurer d'obtenir le bon timing et ne pas se null/undefined.

Assurez-vous de mettre votre Modèle d'assistance dans un Meteor.isClient mais pas dans un Meteor.startup parce que Meteor.le démarrage est déclenché une fois que votre initiale DOM est prêt (le intitial est le premier, mais avant que son modifié par le réactif de variables ou d'un routeur) afin que votre modèle de définitions doivent exécuter avant ce stade.

OriginalL'auteur Akshat

Merci beaucoup Akshat pour la réponse détaillée)

J'ai plus compliqué cas de l'utilisation d'un Météore.abonnez-vous, j'ai le modèle qui comprend des images de DB. J'ai donc besoin d'attendre que les données à partir de deux de collecte des iamges et nouvelles(toutes les autres données ici).

- Je obtenir mon DOM prêt de cette façon:

imageIsLoaded = new Promise(function(resolve){
    Meteor.subscribe('images',function(){
        resolve()
    });
});

newsIsLoaded = new Promise(function(resolve){
    Meteor.subscribe('news',function(){
        resolve()
    });
});


Template.newsList.onRendered(function(){
    Promise.all([imageIsLoaded, newsIsLoaded]).then(function() {
        //DOM IS READY!!!
        newsServices.masonryInit();
    })
});

Structure du modèle:

<template name="newsList">
         {{#each news}}
            {{> news_item}}
        {{/each}}
</template>

OriginalL'auteur Gleb Dolzikov