How can I use meteor templates with Bootbox?

Question

How can one use Meteor Templates w/ the bootboxjs library?

ie, I have the following template

test.html:

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

it has some events,

test.js:

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

How can you use the template to generate a bootbox modal w/ the events?

Answer 1

1. Add bootbox to your app (via meteorite): mrt add bootboxjs
2. You can pass a DOM fragment to bootbox's dialog function. You can get a DOM fragment from Spark.render(...)

Example:

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

Bonus Example-- Rendering the html, but without any events:

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

Answer 2

You could pass Blaze.toHTML(Template.your_dialog_template) to the "messages" attribute of the bootbox.dialog() call, but events won't work.

So the trick could be to inject your template inside the dialog box once it's open, using 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])

Answer 3

Here's an example Meteor app illustrating:

• modal dialogs (bootboxjs)

• mobile detection (detectmobilebrowser + yepnope)

• multi-select (loudev jquery plugin)

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

Live example: http://modal-example.meteor.com/

Answer 4

I couldn't get the Template.templateName.rendered and Template.templateName.events calls to happen with this approach:

Fails to execute rendered and events:

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

Executes rendered and events:

Render the template in a div with display:none:

HTML

<div id="modalContainer">{{> modalTemplate}}</div>

Re-render it as necessary by updating its data with Session.set:

Some other template

Session.set 'data', this.data

Modal Template

Template.modalTemplate.helpers
  data: -> Session.get 'data'

Display the fully rendered and reactive template with bootbox.dialog:

Another template

bootbox.dialog
  message: $('#modalContainer')
  title: 'title'
  closeButton: true

I would rather be able to render the template in the bootbox.dialog call, but I couldn't get it to work without some weird setTimeout business. I also tried Spark.render to no avail. I'm going to look into bootbox.dialog to see if a callback option would be a helpful addition.

Answer 5

Using the latest version of Meteor you can do the following

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