title: Bootboxjs: how to render a Meteor template as dialog body
body: <p>I have the following template:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template name="modalTest"&gt;
      {{session "modalTestNumber"}} &lt;button id="modalTestIncrement"&gt;Increment&lt;/button&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>That <code>session</code> helper simply is a go-between with the <code>Session</code> object. I have that <code>modalTestNumber</code> initialized to <code>0</code>.</p>
  
  <p>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:</p>
  
  <pre class="lang-js prettyprint-override"><code>Template.modalTest.events({
      'click #modalTestIncrement': function(e, t) {
          console.log('click');
          Session.set('modalTestNumber', Session.get('modalTestNumber') + 1);
      }
  });
  </code></pre>
  
  <p>Here are all of the things I have tried, and what they result in:</p>
  
  <pre class="lang-js prettyprint-override"><code>bootbox.dialog({
      message: Template.modalTest()
  });
  </code></pre>
  
  <p>This renders the template, which appears more or less like <code>0 Increment (in a button)</code>. However, when I change the <code>Session</code> variable from the console, it doesn't change, and the event handler isn't called when I click the button (the <code>console.log</code> doesn't even happen).</p>
  
  <pre class="lang-js prettyprint-override"><code>message: Meteor.render(Template.modalTest())
  
  message: Meteor.render(function() { return Template.modalTest(); })
  </code></pre>
  
  <p>These both do exactly the same thing as the <code>Template</code> call by itself.</p>
  
  <pre class="lang-js prettyprint-override"><code>message: new Handlebars.SafeString(Template.modalTest())
  </code></pre>
  
  <p>This just renders the modal body as empty. The modal still pops up though.</p>
  
  <pre><code>message: Meteor.render(new Handlebars.SafeString(Template.modalTest()))
  </code></pre>
  
  <p>Exactly the same as the <code>Template</code> and pure <code>Meteor.render</code> calls; the template is there, but it has no reactivity or event response.</p>
  
  <p>Is it maybe that I'm using <a href="https://github.com/simison/bootstrap3-less" rel="nofollow">this less packaging of bootstrap</a> rather than a standard package?</p>
  
  <p>How can I get this to render in appropriately reactive Meteor style?</p>
  
  <h3>Hacking into Bootbox?</h3>
  
  <p>I just tried hacked into the <code>bootbox.js</code> file itself to see if I could take over. I changed things so that at the <code>bootbox.dialog({})</code> layer I would simply pass the name of the Template I wanted rendered:</p>
  
  <pre class="lang-js prettyprint-override"><code>// 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](); }));
  </code></pre>
  
  <p>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.</p>
  
  <p>Will hacking into bootbox make any difference?</p>
  
  <p>Thanks in advance!</p>