Question

如何使用带有bootboxjs库的Meteor模板？

即，我有以下模板

的test.html：

<template name="test">
  <input type="text" name="testtext"/>
</template>

它有一些事件，

test.js

Template.test.events({
'keyup input[name="testtext"]' : function () { console.log('key up in testtext'); }
});

如何使用模板生成具有事件的bootbox模式？

Answer 1

您可以将Blaze.toHTML（Template.your_dialog_template）传递给bootbox.dialog（）调用的“messages”属性，但事件将无效。

所以诀窍可能是使用Blaze.render（）将模板在打开后插入对话框中。

bootbox.dialog({
        title: "Title",
        message: '<span/>', // bootbox doesn't accept an empty value
        buttons: {
            success: {
                label: "Save",
                className: "btn-success",
                callback: function () {
                    // do tomething

                }
            }
        }
    }
);

// Inject your template inside the dialog box
Blaze.render(Template.dialog_create_cluster, $('.bootbox-body')[0])

Answer 2

将bootbox添加到您的应用中（通过陨石）：mrt add bootboxjs
您可以将DOM片段传递给bootbox的对话框功能。您可以从Spark.render(...)

示例：

bootbox.dialog(
  Spark.render(Template.test),
    [{
      "label" : "Ok",
      "class" : "btn-primary",
       "callback": function() {}
    },{
      "label" : "Cancel",
      "class" : "btn",
      "callback": function() {}
    }],
    {
      "header":"Some Dialog box",
      "headerCloseButton":true,
      "onEscape": function() {}
    }
);

奖金示例 - 渲染html，但没有任何事件：

bootbox.dialog(
  Template.test({contextVar:'SomeValue'}), // Set your context values here
    [{
      "label" : "Ok",
      "class" : "btn-primary",
       "callback": function() {}
    },{
      "label" : "Cancel",
      "class" : "btn",
      "callback": function() {}
    }],
    {
      "header":"Some Dialog box",
      "headerCloseButton":true,
      "onEscape": function() {}
    }
);

Answer 3

以下是一个示例Meteor应用程序说明：

模态对话框（bootboxjs）
移动侦测（detectmobilebrowser + yepnope）
多选（loudev jquery插件）

https://github.com/alanning/meteor-modal-example

实例： http://modal-example.meteor.com/

Answer 4

我无法通过此方法进行Template.templateName.rendered和Template.templateName.events次调用：

无法执行rendered和events：

bootbox.dialog
  title: 'title'
  message: Meteor.render -> Template.template(data: data)
  closeButton: true

执行rendered和events：

使用div：

在display:none中渲染模板

<强> HTML

<div id="modalContainer">{{> modalTemplate}}</div>

通过Session.set

更新数据，根据需要重新渲染

其他一些模板

Session.set 'data', this.data

模态模板

Template.modalTemplate.helpers
  data: -> Session.get 'data'

使用bootbox.dialog显示完全呈现和反应式模板：

另一个模板

bootbox.dialog
  message: $('#modalContainer')
  title: 'title'
  closeButton: true

我希望能够在bootbox.dialog调用中呈现模板，但如果没有一些奇怪的setTimeout业务，我无法让它工作。我也试过Spark.render无济于事。我将调查bootbox.dialog以查看callback选项是否有用。

Answer 5

使用最新版本的Meteor，您可以执行以下操作

let box = bootbox.dialog({title:'Title',message:'-'});
box.find('.bootbox-body').remove();
Blaze.renderWithData(template,MyCollection.findOne({_id}),box.find(".modal-body")[0]);

如果您希望对话框被反应，请使用

let box = bootbox.dialog({title:'Title',message:'-'});
box.find('.bootbox-body').remove();
Blaze.renderWithData(template,function() {return MyCollection.findOne({_id})},box.find(".modal-body")[0]);

如何在Bootbox中使用流星模板？

5 个答案: