Rappel après la mise à jour du DOM dans Meteor.js

Question

J'ai ce projet Meteor: https://github.com/jfahrenkrug/code_buddy

C'est essentiellement un outil avec un grand textarea et un pré de la zone qui vous permet d'entrer le code source des extraits automatiquement transférées à tous les clients connectés.

J'aimerais exécuter automatiquement l'highlightSyntax fonction lorsque le code a été modifié, mais il ne fonctionne pas vraiment.

J'ai essayé de requête.observer, mais qui ne fonctionne pas trop bien: La coloration syntaxique flashé une seule fois et disparut de nouveau.

Donc ma question est: Comment puis-je exécuter du code après le DOM a été mis à jour?

Answer 1

Un hacky façon de le faire est:

foo.html

<template name="mytemplate">
  <div id="my-magic-div">
    .. stuff goes here ..
    {{add_my_special_behavior}}
  </div>
</template>

foo.js

Template.mytemplate.add_my_special_behavior = function () {
  Meteor.defer(function () {
    // find #my-magic-div in the DOM
    // do stuff to it
  });
  // return nothing
};

La fonction sera appelée à chaque fois que le modèle est rendu (ou re-rendus), de sorte que vous pouvez l'utiliser comme un crochet à faire tout spécial de manipulation du DOM que vous voulez faire. Vous devez utiliser un Météore.reporter (qui fait la même chose que settimeout(f, 0)) car à l'époque, le modèle est en cours de rendu, il n'est pas dans les DOM encore.

Gardez à l'esprit que vous pouvez effectuer le rendu d'un modèle sans l'insérer dans le DOM! Par exemple, il est tout à fait légal pour ce faire:

console.log(Template.mytemplate())

Alors, quand un modèle est rendu, il n'y a pas une garantie à 100% qu'il va finir dans les DOM. C'est à l'utilisateur du modèle.

Answer 2

À partir de Meteor 0.4.0, Template.myTemplate.rendered fournit un rappel lorsqu'une instance du modèle est rendue.

Plus d'informations sur http://docs.meteor.com/#template_rendered

Answer 3

Meteor.flush () http://docs.meteor.com/#meteor_flush vous permet de forcer toutes les mises à jour en attente du DOM.

Après avoir appelé flush (), vous savez que le DOM a été mis à jour et vous pouvez donc effectuer les modifications manuelles manuelles dont vous avez besoin.

Answer 4

Cette question est assez ancienne, mais la solution, deux ans plus tard, consisterait à intégrer une bibliothèque de transformation opérationnelle à Meteor et à utiliser Ace ou CodeMirror sur le client, qui met en évidence la syntaxe automatiquement. Cela présente l’avantage supplémentaire de permettre aux utilisateurs d’éditer en même temps.

J'ai déjà fait le travail pour toi :)

Answer 5

Il semble Template.myTemplate.rendered ne fonctionne pas correctement, ou que je ne comprends pas...

J'ai besoin de charger TinyMCE inline après un modèle avec tous les postes sont rendus, j'ai donc :

- un Modèle

<div id="wrapper">     
         {{#each posts}}
             <div class="editable">{{post}}</div>
         {{/each}}        
  </div>

- et une Fonction

Template.myPosts.rendered = function(){
      console.dir($("div"));
      tinymce.init({
          selector: "div.editable",
          inline: true,
          plugins: [
              "advlist autolink lists link image charmap print preview anchor",
              "searchreplace visualblocks code fullscreen",
              "insertdatetime media table contextmenu paste"
          ],
          toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});

}

Cependant, les journaux de la console uniquement l' <div id="wrapper"> et pas l' <div class="editable"> divs, qui contiennent mes messages. Donc, il semblerait Template.myTemplate.rendered rappel se fait avant le modèle est rendu, non?

EDIT: j'ai mis l' Template.myTemplate.rendered code à l'intérieur d'un setTimeout() et tout semble fonctionner, donc je suis sûr que Template.myTemplate.rendered provoque le problème.