如何在另一个模板渲染后重新运行/渲染一个流星模板助手?

时间:2013-07-11 03:22:47

标签: javascript meteor handlebars.js

我在模板Nav

中有一个名为{{renderNav}}的模板助手

e.g。

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不再按照你的建议再次运行。我是否误解或错误地实施了您的建议?

2 个答案:

答案 0 :(得分: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
    ...
}

答案 1 :(得分:3)

如果你想在contentWindow呈现时自动重建导航,正如Hubert OG建议的那样,你也可以使用更清晰,更低级的方式来使上下文无效:

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]);