meteor - Bootboxjs : how to render a Meteor template as dialog body

Question

我有以下模板:

<template name="modalTest">
    {{session "modalTestNumber"}} <button id="modalTestIncrement">Increment</button>
</template>

那 session helper 只是 Session 的中间人。目的。我有 modalTestNumber初始化为 0 .

我希望这个模板以其所有的 react 性呈现到一个引导箱模式对话框中。我为此模板声明了以下事件处理程序:

Template.modalTest.events({
    'click #modalTestIncrement': function(e, t) {
        console.log('click');
        Session.set('modalTestNumber', Session.get('modalTestNumber') + 1);
    }
});

以下是我尝试过的所有事情，以及它们的结果:

bootbox.dialog({
    message: Template.modalTest()
});

这会渲染模板，它看起来或多或少像 0 Increment (in a button) .但是，当我更改 Session来自控制台的变量，它不会改变，并且当我单击按钮时不会调用事件处理程序( console.log 甚至不会发生)。

message: Meteor.render(Template.modalTest())

message: Meteor.render(function() { return Template.modalTest(); })

这两者的作用与 Template 完全相同。自己调用。

message: new Handlebars.SafeString(Template.modalTest())

这只是将模态体呈现为空。模态仍然会弹出。

message: Meteor.render(new Handlebars.SafeString(Template.modalTest()))

与 Template 完全相同纯净的 Meteor.render来电；模板在那里，但它没有反应性或事件响应。

是不是我正在使用 this less packaging of bootstrap而不是标准包？

我怎样才能让它以适当的 react meteor 风格呈现？

侵入 Bootbox？

我刚刚尝试黑入 bootbox.js文件本身，看看我是否可以接管。我改变了一些东西，以便在 bootbox.dialog({})层我会简单地传递我想要渲染的模板的名称:

// 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](); }));

这两个不同的版本(不要担心它们是两种不同的尝试，而不是同时)它们都以非 react 性方式呈现模板，就像它们之前所做的那样。

入侵引导箱会有什么不同吗？

提前致谢!

Answer 1

我正在使用当前 0.9.3.1 版本的 Meteor 给出答案。
如果要渲染模板并保持 react 性，则必须:

在父节点中渲染模板

让父节点已经在 DOM

所以这个非常短的函数就是这样做的答案:

    renderTmp = function (template, data) {
        var node = document.createElement("div");
        document.body.appendChild(node);
        UI.renderWithData(template, data, node);
        return node;
    };

在你的情况下，你会这样做:

    bootbox.dialog({
        message: renderTmp(Template.modalTest)
    });