Bootboxjs: how to render a Meteor template as a body of a dialogue

Question

I have the following template:

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

This helper is sessionjust intermediate with the object session. I have modalTestNumberinitialized to 0.

I want this template to be displayed with all its reactivity in the modal download 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 is all that I have tried and what they lead to:

bootbox.dialog({
    message: Template.modalTest()
});

This displays a template that is more or less similar to 0 Increment (in a button). However, when I change a variable sessionfrom the console, it does not change, and the event handler is not called when I click the button ( console.logit doesn’t even happen).

message: Meteor.render(Template.modalTest())

message: Meteor.render(function() { return Template.modalTest(); })

Both of them do exactly the same thing as the challenge Template.

message: new Handlebars.SafeString(Template.modalTest())

. , .

message: Meteor.render(new Handlebars.SafeString(Template.modalTest()))

, Template pure Meteor.render; , .

, bootstrap ?

Meteor?

Bootbox?

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

( , , ), , .

?

!

Answer 1

, 0.9.3.1. , :

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

Answer 2

Meteor 1.0 +:

Blaze.render Blaze.renderWithData, bootbox , .

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 node,

message: "<div id='dialogNode'></div>"

message $(".bootbox-body"), node.

, message .

Answer 3

Meteor , , Meteor.render(). templates.

, .. :

bootbox.dialog({
    message: Meteor.render(function() { return Template.modalTest(); })
});

!

, Meteor.render(). , .

Answer 4

Meteor 1.1.0.2

, changePassword, oldPassword newPassword, , , .

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

Answer 5

Meteor, .

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

, ,

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