comment gérer correctement le dom prêt pour Meteor

Je suis actuellement en utilisant fer-routeur et c'est ma première tentative pour essayer de le Météore de la plateforme. I a été en cours d'exécution dans les questions où la plupart des bibliothèques jquery échoué à initialisée correctement parce que le de la façon Meteor affiche le code html $(document).prêt() feux avant tout les modèles sont affichés. Je me demande est-il des rappels à partir de Meteor/fer-routeur qui me permet de remplacer le jQuery dom prêt?

Aussi, comment dois-je (facilement et correctement) gérer la mise à jour des éléments du dom si certains d'entre eux sont personnalisés par jQuery/javascript?

C'est ce que je fais actuellement, j'ai l'impression que c'est très hackish et ne serait probablement rencontrer des problèmes si les éléments s'est mis à jour après l'initialisation.

var jsInitalized = false;

Router.map(function () {
  this.route('', {
    path: '/',
    layoutTemplate: 'default',
    after: function(){
      if(!jsInitalized){
        setTimeout(function(){
          $(document).ready( function() { $$$(); });
        }, 0);
        jsInitalized = true;
      }
    }
  });
}

source d'informationauteur megablue

  1. 21

    Avec Meteor en général, vous voulez penser à quand un modèle est prêt, pas quand la dom est prêt.

    Par exemple, disons que vous souhaitez utiliser le jQuery DataTables plugin pour ajouter un tri à un élément de tableau qui est créé par un modèle. Vous écoutez le modèle de rendu de l'événement et de lier le plugin pour les dom:

    HTML:

    <template name="data_table">
  <table class="table table-striped" id="tblData">
  </table>
</template>

    JavaScript:

    Template.data_table.rendered = function () {
  $('#tblData').dataTable();
};

    Maintenant à chaque fois que le modèle est ré-rendus (par exemple, si la modification de données), votre gestionnaire sera appelé et vous pouvez lier le plugin jQuery pour les dom nouveau.

    C'est l'approche générale. Pour un exemple complet (qui comprend le remplissage de la table avec des lignes), ce réponse.

  2. 9

    Essayez de faire un distinct .fichier js, appeler rendered.js si vous le souhaitez. et puis;

    Template.layout.rendered = function ()
{
    $(document).ready(function(){console.log('ready')});
}

    Je utiliser un modèle de mise en page, mais vous pouvez faire un Modèle.par défaut.rendue. J'espère que ça aide.

    Aussi jeter un oeil à cette partie de la documentation, en particulier le Modèle.les événements; http://docs.meteor.com/#templates_api

  3. 3

    - Je utiliser Meteor v0.8.0 avec le Fer Routeur (sous Windows 7) et voici comment je gère "DOM ready":

    Lorsque je veux modifier le DOM après un modèle spécifique a été rendu:

    - Je utiliser Template.myTemplateName.rendered sur le côté client :

    Template.blog.rendered = function()
{
    $('#addPost').click(function() 
    { 
        ...
    });
}

    Lorsque je veux modifier le DOM après tout nouveau chemin d'accès a été rendu:

    - Je utiliser Router.onAfterActionmais il semble y avoir une astuce:

    Router.onAfterAction(function()
{
    setTimeout(function() 
    {
        $('.clickable').click(function() 
        { 
            ...
        });
    }, 0);
});

    Avis de la setTimeout(..., 0)il ne fonctionne pas pour moi sinon DOM (vide).

    Notez que vous pouvez utiliser onAfterAction sur un chemin spécifique, mais la plupart du temps, je pense que c'est redondant avec le Template.myTemplateName.rendered méthode ci-dessus.

    Ce qui semble être manquant:

    Un moyen de modifier le DOM après aucun modèle a été rendu.