35

私はこのMeteorプロジェクトを持っています：https ：//github.com/jfahrenkrug/code_buddy

これは基本的に、接続されているすべてのクライアントに自動的にプッシュされるソースコードスニペットを入力できる大きなテキストエリアとプレエリアを備えたツールです。

コードが変更されたときにhighlightSyntax関数を自動的に実行したいのですが、実際には機能しません。

query.observeを試しましたが、うまくいきませんでした。構文のハイライトが1回点滅した後、再び消えました。

だから私の質問は：DOMが更新された後にコードを実行するにはどうすればよいですか？

4

9 に答える 9

33

それを行うためのハッキーな方法は次のとおりです。

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
};

この関数は、テンプレートがレンダリング（または再レンダリング）されるたびに呼び出されるため、フックとして使用して、特別なDOM操作を実行できます。Meteor.defer（settimeout（f、0）と同じことを行います）を使用する必要があります。これは、テンプレートがレンダリングされている時点では、まだDOMに含まれていないためです。

テンプレートをDOMに挿入せずにレンダリングできることに注意してください。たとえば、これを行うことは完全に合法です。

console.log(Template.mytemplate())

したがって、テンプレートがレンダリングされるときに、それがDOMに配置されるという100％の保証はありません。テンプレートのユーザー次第です。

于 2012-04-12T08:27:07.727 に答える
29

Meteor 0.4.0以降Template.myTemplate.rendered、コールバックを提供します。

Template.myTemplateのインスタンスがDOMノードにレンダリングされ、初めてドキュメントに配置されるときに1回呼び出されます。

詳細については、http：//docs.meteor.com/#template_renderedをご覧ください。

于 2012-09-05T14:40:55.730 に答える
9

Meteor（1.0）の現在のバージョンについては、Trackerの.afterFlush（）関数を使用できるようになりました。

Tracker.autorun(function(e){
   var data = Router.current().data();
   if(data.key !== undefined){
       //the data is there but dom may not be created yet
     Tracker.afterFlush(function(){
       //dom is now created.
    });
   }
});
于 2014-12-09T08:44:57.630 に答える
3

DOMが更新された後はコールバックはありませんが、保留中のすべてのDOM更新を強制的に行うことができますTracker.flush()。

を呼び出すとflush()、DOMが更新されたことがわかり、必要なDOMの手動変更を実行できます。

于 2012-04-11T18:40:03.283 に答える
2

この質問はかなり古いものですが、2年後の解決策は、操作変換ライブラリをMeteorと統合し、クライアントでAceまたはCodeMirrorを使用して、構文の強調表示を自動的に行うことです。これには、ユーザーが同時に編集できるという追加の利点があります。

私はすでにあなたのために仕事をしました:)

于 2014-06-23T16:01:05.423 に答える
1

Blazeコンポーネント（私は作成者の1人です）には、DOMが挿入、移動、または削除されたときにメソッドを呼び出すAPIがあります。ここで、DOMが変更されたときにリアクティブ変数を作成する方法を確認できます。

このアプローチの欠点は、DOM要素の属性が変更されても（class変更など）変更されないことです。DOM要素自体が変更された場合のみ。これはほとんどの場合に機能しますが、2番目が必要な場合は、MutationObserverを使用することをお勧めします。この場合、外部の変更にも対応できるようになります。

于 2015-10-15T01:30:52.467 に答える
0

正しく動作しないかTemplate.myTemplate.rendered、わかりません...

すべての投稿を含むテンプレートがレンダリングされた後、TinyMCEをインラインでロードする必要があるため、次のようになります。

-テンプレート

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

-および関数

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"
});

}

ただし、コンソールは、私の投稿を含むdivのみ<div id="wrapper">をログに記録し、divはログに記録しません。<div class="editable">つまり、Template.myTemplate.renderedテンプレートがレンダリングされる前にコールバックが発生するようですよね？

編集：Template.myTemplate.renderedコードをaの中に入れてsetTimeout()、すべてが機能しているように見えるのでTemplate.myTemplate.rendered、問題が発生することは間違いありません。

于 2014-06-22T08:54:02.683 に答える
0

私はちょうどかなりうまく機能しているように見える小さなハックを見つけました：

Template.myTemplate.onRendered(function() {
    this.autorun(function() {
        Meteor.setTimeout(function() {
            // DOM has been updated
        }, 1);
    });
});

私はMeteorの専門家ではないので、いくつかの欠点があるかもしれませんが、少し汚れていることを除いて、今のところ何も見つかりませんでした。

于 2016-01-19T16:03:10.280 に答える
-2

私はあなたがコールバックを渡すことを望むかもしれないと思います

Meteor.startup(callback)

http://docs.meteor.com/#meteor_startupを参照してください

于 2012-04-12T04:13:13.120 に答える