问题描述
我有以下模板:
<template name="modalTest">
{{session "modalTestNumber"}} <button id="modalTestIncrement">Increment</button>
</template>
该session
助手只是一个与Session
对象之间的中介.我已经将modalTestNumber
初始化为0
.
That session
helper simply is a go-between with the Session
object. I have that modalTestNumber
initialized to 0
.
我希望将此模板(具有全部反应性)呈现到启动箱模式对话框中.我为此模板声明了以下事件处理程序:
I want this template to be rendered, with all of it's reactivity, into a bootbox modal dialog. I have the following event handler declared for this template:
Template.modalTest.events({
'click #modalTestIncrement': function(e, t) {
console.log('click');
Session.set('modalTestNumber', Session.get('modalTestNumber') + 1);
}
});
以下是我尝试过的所有内容以及它们产生的结果:
Here are all of the things I have tried, and what they result in:
bootbox.dialog({
message: Template.modalTest()
});
这将渲染模板,其外观或多或少像0 Increment (in a button)
.但是,当我从控制台更改Session
变量时,它没有改变,并且当我单击按钮时,事件处理程序也没有被调用(console.log
甚至没有发生).
This renders the template, which appears more or less like 0 Increment (in a button)
. However, when I change the Session
variable from the console, it doesn't change, and the event handler isn't called when I click the button (the console.log
doesn't even happen).
message: Meteor.render(Template.modalTest())
message: Meteor.render(function() { return Template.modalTest(); })
这两个函数本身与Template
调用完全相同.
These both do exactly the same thing as the Template
call by itself.
message: new Handlebars.SafeString(Template.modalTest())
这只会使模态主体为空.模态仍然弹出.
This just renders the modal body as empty. The modal still pops up though.
message: Meteor.render(new Handlebars.SafeString(Template.modalTest()))
与Template
和纯Meteor.render
调用完全相同;模板在那里,但是没有反应性或事件响应.
Exactly the same as the Template
and pure Meteor.render
calls; the template is there, but it has no reactivity or event response.
也许我使用的是这种较少的bootstrap包装,而不是标准软件包?
Is it maybe that I'm using this less packaging of bootstrap rather than a standard package?
如何获得以适当的反应性流星样式呈现的图像?
How can I get this to render in appropriately reactive Meteor style?
我刚刚尝试入侵bootbox.js
文件本身,以查看是否可以接管.我进行了更改,以便在bootbox.dialog({})
层中仅传递要渲染的模板的名称:
I just tried hacked into the bootbox.js
file itself to see if I could take over. I changed things so that at the bootbox.dialog({})
layer I would simply pass the name of the Template I wanted rendered:
// in bootbox.js::exports.dialog
console.log(options.message); // I'm passing the template name now, so this yields 'modalTest'
body.find(".bootbox-body").html(Meteor.render(Template[options.message]));
body.find(".bootbox-body").html(Meteor.render(function() { return Template[options.message](); }));
这两个不同的版本(不必担心它们是两次不同的尝试,而不是同时进行),就像以前一样,它们都使模板无反应.
These two different versions (don't worry they're two different attempts, not at the same time) these both render the template non-reactively, just like they did before.
入侵Bootbox会有所不同吗?
Will hacking into bootbox make any difference?
提前谢谢!
推荐答案
我给出了使用当前0.9.3.1版本的Meteor的答案.如果要渲染模板并保持反应性,则必须:
I am giving an answer working with the current 0.9.3.1 version of Meteor.If you want to render a template and keep reactivity, you have to :
- 父节点中的渲染模板
- 在DOM中已经有父母了
这个非常简短的功能就是解决这个问题的方法:
So this very short function is the answer to do that :
renderTmp = function (template, data) {
var node = document.createElement("div");
document.body.appendChild(node);
UI.renderWithData(template, data, node);
return node;
};
在您的情况下,您可以这样做:
In your case, you would do :
bootbox.dialog({
message: renderTmp(Template.modalTest)
});
这篇关于Bootbox.js:如何将Meteor模板呈现为对话框主体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!