Bootbox.js:如何将Meteor模板呈现为对话框主体 [英] Bootboxjs: how to render a Meteor template as dialog body

问题描述

我有以下模板:

<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模板呈现为对话框主体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！