2

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

即，我有以下模板

测试.html：

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

它有一些事件，

测试.js：

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

如何使用模板生成带有事件的引导框模式？

4

5 回答 5

2

您可以将 Blaze.toHTML(Template.your_dialog_template) 传递给 bootbox.dialog() 调用的“消息”属性，但事件不起作用。

因此，诀窍可能是在对话框打开后将模板注入到对话框中，使用 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])
于 2015-01-25T17:29:37.200 回答
1

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

  • 模态对话框（bootboxjs）

  • 移动检测（detectmobilebrowser + yepnope）

  • 多选（loudev jquery 插件）

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

现场示例： http: //modal-example.meteor.com/

于 2013-10-29T22:35:44.383 回答
1

我无法使用这种方法进行Template.templateName.renderedandTemplate.templateName.events调用：

执行失败rendered并且events：

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

执行rendered和events：

div在with中渲染模板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选项是否会是一个有用的补充。

于 2014-02-20T17:15:50.037 回答
1
  1. 将引导箱添加到您的应用程序（通过陨石）：mrt add bootboxjs
  2. 您可以将 DOM 片段传递给 bootbox 的对话框函数。您可以从中获取 DOM 片段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() {}
    }
);
于 2013-10-28T22:25:16.233 回答
1

使用最新版本的 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]);
于 2016-04-19T04:00:02.767 回答