0

Meteor のドキュメントによると、Template.template_name.rendered に割り当てられたコールバックは、template_name の各インスタンスがレンダリングを終了した後に実行されます。この機能を使用して、テンプレートによって生成された DOM 要素に jQuery プラグイン (TagsManager や DotDotDot など) をアタッチしようとしています。これを行う「自然な」方法は次のようになります。

Template.template_name.rendered = function () {
    var template = this;
    var elem = $('input#tags'+template.data._id);
    elem.tagsManager();  // doesn't work
}

ただし、これは機能しません。期待される動作が要素に関連付けられません。jQuery セレクターは適切に動作し、 の内部をログに記録するとtagsManager()、イベント ハンドラーがアタッチされているように見えますが、.tagsManager()終了後は何らかの形でアタッチされていません。

$(document).readyコードを aまたは shortでラップする「通常の」ソリューションはsetTimeout、まったく同じ動作に悩まされます。

Template.template_name.rendered = function () {
    var template = this;
    $(document).ready(function () {
        window.setTimeout(function () {
            var elem = $('input#tags'+template.data._id);
            elem.tagsManager();
        }, 100);  // 0.1 seconds + $(document).ready doesn't work
    });
}

setTimeout3 秒など、非現実的に長い時間を与えることによってのみ、機能するようになりました。

Template.song.rendered = function () {
    var template = this;
    console.log("Template for "+template.data.title+" created");
    $(document).ready(function () {
        window.setTimeout(function () {
            var elem = $('input#tags'+template.data._id);
            elem.tagsManager();
        }, 3000);  // 3 seconds + $(document).ready works
    });
}

実際のところ、elem.tagsManager()単純なものに置き換えてもelem.on('click',...)、上記と同じ動作に悩まされます-これが、Meteorの人たちが私たちTemplate.template_name.eventsに . ただし、この種のプラグインはすべての興味深いプラグインを壊し、上記のようなハックで危険なコードに頼らざるを得なくなります。より良い方法はありますか？

4

2 に答える 2

1

テンプレートで、jQuery を適用する div を{{#constant}}ヘルパーでラップします。これにより、ラップされた要素に対するすべての反応性が失われます。

反応性が必要な場合、または定数が役に立たなかった場合は、このハックを試してください。render が呼び出されたときに要素のイベントのバインドを解除し、その直後にバインドします。この場合の問題は、レンダリングが何十回も呼び出され、私が理解していない方法で失敗することです。デバッグを試して、レンダリングの最初の行にある console.log で何回呼び出されているかを確認してください。

それが役に立てば幸い！

于 2013-07-06T21:45:47.673 に答える