2

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

テンプレートを使用して、イベントを含むブートボックス モーダルを生成するにはどうすればよいですか?

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

このアプローチでは、 Template.templateName.renderedandの呼び出しが発生しませんでした。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

于 2014-02-20T17:15:50.037 に答える
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 に答える
1
  1. アプリにブートボックスを追加します (隕石経由):mrt add bootboxjs
  2. ブートボックスのダイアログ関数に DOM フラグメントを渡すことができます。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 に答える