6

テンプレート Nav に {{renderNav}} というテンプレート ヘルパーがあります。

例えば

Template.Nav.renderNav

そのヘルパー関数内で、別のテンプレート内の別のヘルパーのレンダリングされた出力を解析したい

たとえば、ヘルパー

Template.contentWindow.content

のhtmlを提供します

{{content}}

私のrenderNavヘルパーは、{{content}}を置き換えるhtmlを分割して、htmlを生成したいと考えています

{{renderNav}}

どうすればいいですか？現在、{{renderNav}} ヘルパーが実行されるか、より高速に実行されるため、{{content}} を置き換える html を解析できません。

@Hugo - あなたが提案したように、コードで次のことを行いました

Template.contentWindow.rendered = function() {
    debugger;  
    return Session.set('entryRendered', true);
};

Template.Nav.renderNav = function() {
    debugger;
    var forceDependency;
    return forceDependency = Session.get('entryRendered');
};

実行すると、renderNav ヘルパーの実行時にデバッガーが最初に停止します。(これは、競合状態に関して私が見ているもので理にかなっています)。次に、contentWindow がレンダリングされ、Session.set('entryRendered', true) の上のブレークポイントにヒットします。しかし、その後、renderNav は、あなたが推奨するように再び実行されません。あなたの提案を誤解したり、誤って実装したりしましたか?

4

2 に答える 2

4

再実行するテンプレートに依存関係が必要です。取得したいデータに応じて、可能性はほとんどありません。

たとえば、描画が完了したことcontentを通知するリアクティブ マーカーをテンプレートに設定できます。renderNav

Template.contentWidnow.rendered = function() {
    ...

    // Set this on the very end of rendered callback.
    Session.set('contentWindowRenderMark', '' +
        new Date().getTime() +
        Math.floor(Math.random() * 1000000) );
}


Template.renderNav.contentData = function() {
    // You don't have to actually use the mark value,
    // but you need to obtain it so that the dependency
    // is registered for this helper.
    var mark = Session.get('contentWindowRenderMark');

    // Get the data you need and prepare for displaying
    ...
}

 

 

提供された詳細情報を使用して、そのようなコードを作成できます。

content.js

Content = {};
Content._dep = new Deps.Dependency;

contentWindow.js

Template.contentWidnow.rendered = function() {
    Content.headers = this.findAll(':header');
    Content._dep.changed();
}

renderNav.js

Template.renderNav.contentData = function() {
    Content._dep.depend();
    // use Content.headers here
    ...
}
于 2013-07-11T08:10:57.417 に答える
3

Hubert OG が提案したように、contentWindow のレンダリング時にナビゲーションを自動的に再構築する場合は、コンテキストを無効にするクリーンで低レベルの方法を使用することもできます。

var navDep = new Deps.Dependency;

Template.contentWindow.rendered = function() {
    ...
    navDep.changed();
}

Template.renderNav.contentData = function() {
    navDep.depend();

    // Get the data you need and prepare for displaying
    ...
}

詳細については、 http://docs.meteor.com/#depsを参照してください。

一方、別のテンプレートを手動でレンダリングしたい場合は、それを関数として呼び出すことができます。

var html = Template.contentWindow();

返された html は反応しません。反応性が必要な場合は、次を使用します。

var reactiveFragment = Meteor.render(Template.contentWindow);

これがどのように機能するかの詳細については、Spark と反応性に関するhttp://www.eventedmind.com/のスクリーンキャストを参照してください。

アップデート

レンダリングされたフラグメントを DOM に追加するには:

document.body.appendChild(Meteor.render(function () {
    return '<h1>hello</h1><b>hello world</b>';
}));

DOM API を使用して、レンダリングされたノードに直接アクセスすることもできます。

console.log(reactiveFragment.childNodes[0]);
于 2013-07-11T09:36:20.357 に答える