Bootboxjs:如何将 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.

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

Is it maybe that I'm using this less packaging of bootstrap rather than a standard package?

我怎样才能让它以适当的反应 Meteor 风格呈现?

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

这篇关于Bootboxjs:如何将 Meteor 模板呈现为对话框体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！