Ordre du modèle rendu: parent déclenche avant modèle (s) enfant

Question

Je suis assez nouveau à Meteor et j'ai du mal à essayer de comprendre l'événement «rendu» sur les modèles.

En supposant que j'ai ces deux modèles:

<template name="parent">  
    <div id="list"> 
     {{#each childs}} 
      {{> child}} 
     {{/each}} 
    </div> 
</template> 

<template name="child"> 
    <div class="item"> 
     <!-- content --> 
    </div> 
</template> 

et ces deux événements:

Template.parent.rendered = function() { 
    console.log('parent'); 
}; 

Template.child.rendered = function() { 
    console.log('child'); 
}; 

je reçois toujours ce de la console:

 
> parent 
> child 
> child 
> child 

Donc, fondamentalement, les déclencheurs du modèle parent "rendu" avant la fin du rendu des modèles internes. Pour cette raison, je suis incapable d'exécuter des opérations de post sur le DOM comme les plugins jquery. par exemple:

Template.parent.rendered = function() { 
    $('#list').myplugin(); 
}; 

Comme ce dernier est exécuté avant que les modèles internes sont rendus il se casse le plug-in.

Existe-t-il une solution de contournement ou un événement de météore que je peux utiliser pour sécuriser maintenant quand un modèle est entièrement rendu, y compris ses modèles internes?

Answer 1

Mon conseil général pour les problèmes de ce genre est que vous devriez chercher un moyen d'activer votre plugin après avoir rendu chaque enfant, plutôt qu'après avoir rendu le parent - même si cela signifie faire des appels supplémentaires au plugin. Si vous pouvez le faire, cela résout également le problème lié à ce qui se passe lorsque d'autres enfants sont ajoutés plus tard (bien sûr, cela peut ne pas s'appliquer dans votre cas).

Il est difficile de donner une réponse précise sans connaître plus de détails sur ce que votre plug-in fait, mais je peux donner un exemple d'une de mes applications:

je devais assurer que tous les enfants étaient la même hauteur que le plus grand des enfants. Ma première réaction a été que je devais attendre que tous les enfants finissent le rendu et ajuster leur hauteur une fois. La solution la plus simple consistait simplement à redimensionner chacun d'entre eux à chaque fois que l'un d'entre eux était rendu. Bien sûr, il s'agit de comparaisons O (N^2), mais c'est toujours rapide pour une petite liste et fonctionne même quand de nouveaux enfants sont ajoutés.

---

Notez que si vous deviez absolument appeler le plug-in une fois et pas de nouveaux enfants pourraient être ajoutés plus tard, vous pouvez essayer une bidouille horrible pour initialiser le plug-in seulement après tous ont été rendus. Par exemple:

Template.child.rendered = function() { 
    if ($('.child').length === Children.find().count()) { 
    $('#list').myplugin(); 
    } 
};