Meteor: L'élément DOM n'existe pas encore dans la fonction de rappel Template.rendered

Question

Je construis une application avec Meteor, j'ai un bouton de menu qui est une bascule qui affiche et cache une barre latérale. (barres vertes)

Une fois que la page est chargée ou une fois que l'utilisateur se connecte, si la largeur du navigateur est supérieure à 768px, je veux cliquer sur le bouton bascule du menu pour l'afficher.

Actuellement j'accomplis cela en vérifiant Meteor.user() car il est appelé une fois que la page est chargée si l'utilisateur est connecté et si l'utilisateur se connecte pour la première fois.

userEnabled =() -> 
    if Meteor.user() 
    console.log 'user Enabled called ' + menuOpen 
    if $(window).width() > 768 
     if menuOpen is false 
     console.log 'reached inside' 
     # Need to use setTimeout before clicking because .show-left element has just been added back to the screen, so we need to wait. I don't like this very much, need to find better method. 
     setTimeout -> 
      $('.show-left').click() 
     , 600 

Deps.autorun() -> 
    userEnabled() 

Le problème est que, pour une raison quelconque lors de chargement de la page, userEnabled() est parfois appelé deux fois, ouvert et ferme la barre latérale. Un autre problème est d'avoir à utiliser une méthode setTimeout pour attendre que l'élément Toggle du menu existe, donc je peux cliquer dessus. Sans setTimeout, l'élément n'est pas cliqué.

donc 2 questions

1) de rappel de connexion côté client est appelé deux fois

2) Je dois utiliser setTimeout attendre élément d'exister avant de cliquer dessus.

Comment puis-je résoudre ce problème? Faites-moi savoir si vous avez besoin de plus d'informations de ma part, et merci beaucoup pour l'aide que vous nous avez apportée.

Answer 1

Solution (utilisation Meteor.defer avec fonction de rappel):

userEnabled =() -> 
    if Meteor.user() 
    if $(window).width() > 768 
     if !$('.show-left').hasClass 'active' 
     # Need to use setTimeout before clicking because .show-left element has just been added back to the screen, so we need to wait. I don't like this very much, need to find better method. 
     Meteor.defer -> 
      $('.show-left').click() 

Router.map -> 
    @route 'template1', 
    path: '/template1', 
    @route 'addAndSearchPosts', 
    path: '/', 
    onAfterAction: -> 
     userEnabled() 

avis au lieu d'utiliser setTimeout avant de cliquer sur le bouton $ ('show-gauche.) J'utilise Meteor.defer. Meteor.defer attend jusqu'à ce que le DOM soit complètement mis à jour et ait tous les éléments nécessaires. Sinon sans cela lorsque vous essayez d'accéder aux éléments DOM sur le rendu, ils peuvent finir par ne pas fonctionner! Utilisez Meteor.defer avec un rappel pour utiliser les événements sur le DOM ou mettre à jour le DOM dans le rappel rendu ou dans la fonction onAfterAction.