Bootboxjs:如何将Meteor模板渲染为对话框主体

Question

我有以下模板:

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

那个session助手只是与Session对象的中间人.我把它modalTestNumber初始化为0.

我希望将这个模板以及所有它的反应性渲染到一个bootbox模式对话框中.我为此模板声明了以下事件处理程序:

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电话完全相同; 模板在那里,但没有反应或事件响应.

可能是我使用这种较少的引导包装而不是标准包装？

如何以适当的反应流星风格渲染？

黑客入侵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](); }));

这两个不同的版本(不要担心它们是两次不同的尝试,而不是同时),这两个版本都是非反应性地渲染模板,就像之前一样.

黑客入侵bootbox会有什么不同吗？

提前致谢!

Answer 1

我正在回答当前流行的0.9.3.1版本.如果要渲染模板并保持反应性,则必须:

• 在父节点中渲染模板
• 让父级已经在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)
});

Answer 2

回答Meteor 1.0+:

在创建引导框对话框后,使用Blaze.render或Blaze.renderWithData将模板呈现到引导框对话框中.

function openMyDialog(fs){ // this can be tied to an event handler in another template
  <! do some stuff here, like setting the data context !>
  bootbox.dialog({
    title: 'This will populate with content from the "myDialog" template',
    message: "<div id='dialogNode'></div>",
    buttons: {
      do: {
        label: "ok",
        className: "btn btn-primary",
        callback: function() {
          <! take some actions !>
        }
      }
    }
  });
  Blaze.render(Template.myDialog,$("#dialogNode")[0]);
};

这假设您定义了一个模板:

<template name="myDialog">
  Content for my dialog box
</template>

Template.myDialog 是为您正在使用的每个模板创建的.

$("#dialogNode")[0] 选择您设置的DOM节点

message: "<div id='dialogNode'></div>"

或者,您可以message留空并使用$(".bootbox-body")选择父节点.

您可以想象,这也允许您message动态更改引导框对话框的部分.