4

次のテンプレートがあります。

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

そのsessionヘルパーは、単にSessionオブジェクトとの仲介者です。にmodalTestNumber初期化しています0。

このテンプレートを、そのすべての反応性とともに、ブートボックスのモーダル ダイアログにレンダリングしたいと考えています。このテンプレートに対して次のイベント ハンドラーを宣言しています。

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呼び出しとまったく同じです。テンプレートはありますが、反応性やイベント応答はありません。

標準パッケージではなく、ブートストラップのこの少ないパッケージを使用している可能性がありますか?

これを適切に反応するMeteorスタイルでレンダリングするにはどうすればよいですか?

ブートボックスにハッキング？

ファイル自体をハッキングして、引き継げる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](); }));

これらの 2 つの異なるバージョン (同時にではなく、2 つの異なる試行であることを心配しないでください) は、以前と同様に、テンプレートを非反応的にレンダリングします。

ブートボックスをハッキングすると違いはありますか?

前もって感謝します！

4

5 に答える 5

5

現在の 0.9.3.1 バージョンの Meteor で動作する回答を提供しています。テンプレートをレンダリングして反応性を維持したい場合は、次のことを行う必要があります。

  • 親ノードでテンプレートをレンダリングする
  • 親がすでに 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)
    });
于 2014-10-10T22:34:22.733 に答える
5

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、ブートボックス ダイアログのセクションを動的に変更することもできます。

于 2014-12-12T03:45:01.310 に答える
0

これはMeteor 1.1.0.2で機能します

oldPassword と newPassword という名前の 2 つのフィールドを持つ changePassword というテンプレートがあると仮定すると、テンプレートを使用してダイアログ ボックスをポップアップし、結果を取得するコードを次に示します。

bootbox.dialog({
    title: 'Change Password',
    message: '<span/>', // Message can't be empty, but we're going to replace the contents
    buttons: {
      success: {
        label: 'Change',
        className: 'btn-primary',
        callback: function(event) {
          var oldPassword = this.find('input[name=oldPassword]').val();
          var newPassword = this.find('input[name=newPassword]').val();
          console.log("Change password from " + oldPassword + " to " + newPassword);
          return false; // Close the dialog
        }
      },
      'Cancel': {
        className: 'btn-default'
      }
    }
  });
  // .bootbox-body is the parent of the span, so we can replace the contents
  // with our template
  // Using UI.renderWithData means we can pass data in to the template too.
  UI.insert(UI.renderWithData(Template.changePassword, {
    name: "Harry"
  }), $('.bootbox-body')[0]);
于 2015-05-09T13:01:45.277 に答える