Bootboxjs: how to render a Meteor template as dialog body

Question

I have the following template:

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

That session helper simply is a go-between with the Session object. I have that modalTestNumber initialized to 0.

I want this template to be rendered, with all of it's reactivity, into a bootbox modal 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 are all of the things I have tried, and what they result in:

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

This renders the template, which appears more or less like 0 Increment (in a button). However, when I change the Session variable from the console, it doesn't change, and the event handler isn't called when I click the button (the console.log doesn't even happen).

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

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

These both do exactly the same thing as the Template call by itself.

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

This just renders the modal body as empty. The modal still pops up though.

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

Exactly the same as the Template and pure Meteor.render calls; the template is there, but it has no reactivity or event response.

Is it maybe that I'm using this less packaging of bootstrap rather than a standard package?

How can I get this to render in appropriately reactive Meteor style?

Hacking into Bootbox?

I just tried hacked into the bootbox.js file itself to see if I could take over. I changed things so that at the bootbox.dialog({}) layer I would simply pass the name of the Template I wanted rendered:

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

These two different versions (don't worry they're two different attempts, not at the same time) these both render the template non-reactively, just like they did before.

Will hacking into bootbox make any difference?

Thanks in advance!

Answer 1

I am giving an answer working with the current 0.9.3.1 version of Meteor. If you want to render a template and keep reactivity, you have to :

• Render template in a parent node
• Have the parent already in the DOM

So this very short function is the answer to do that :

    renderTmp = function (template, data) {
        var node = document.createElement("div");
        document.body.appendChild(node);
        UI.renderWithData(template, data, node);
        return node;
    };

In your case, you would do :

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

Answer 2

Answer for Meteor 1.0+:

Use Blaze.render or Blaze.renderWithData to render the template into the bootbox dialog after the bootbox dialog has been created.

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

This assumes you have a template defined:

    <template name="myDialog">
      Content for my dialog box
    </template>

Template.myDialog is created for every template you're using.

$("#dialogNode")[0] selects the DOM node you setup in

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

Alternatively you can leave message blank and use $(".bootbox-body") to select the parent node.

As you can imagine, this also allows you to change the message section of a bootbox dialog dynamically.

Answer 3

Using the latest version of Meteor, here is a simple way to render a doc into a bootbox

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

If you want the dialog to be reactive use

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

Answer 4

In order to render Meteor templates programmatically while retaining their reactivity you'll want to use Meteor.render(). They address this issue in their docs under templates.

So for your handlers, etc. to work you'd use:

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

This was a major gotcha for me too!

I see that you were really close with the Meteor.render()'s. Let me know if it still doesn't work.

Answer 5

This works for Meteor 1.1.0.2

Assuming we have a template called changePassword that has two fields named oldPassword and newPassword, here's some code to pop up a dialog box using the template and then get the results.

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