DRY dialogs: reactive dialog content?

help
1

Hi there,

I’m just trying not to use a package. I’m familiar with bootbox package to display dialogs. I just wanted to know if it’s possible to create a template for the dialog and a template(s) for its contents.

This is so far the skeleton:

<template name="dialog">
  <div class="modal fade" id="{{dialogId}}">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">{{dialogTitle}}</h4>
        </div>
        <div class="modal-body">
          // somehow generic reactive content or include another template?
        </div>
      </div>
    </div>
  </div>
</template>

And the javascript:

Blaze.renderWithData(Template.dialog,
  {
    dialogTitle: 'My dialog Title',
    dialogId: dialogId
    modalBody: // Blaze.render()? or how to tell to include a template. Blaze.toHTML() wont be reactive
  },
  $('body').get(0)
);


Template.dialog.onRendered( function() {
  $('#dialogId').on('hidden.bs.modal', function (e) {
    Blaze.remove( Blaze.getView( $('#dialogId').get(0) ));
  })
});

The gist link here

Any clue on this? I was thinking on creating a helper inside the dialog template. But I’m not sure if a helper can return a reactive template. Any help is appreciated! :smile:

2

Seems possible to insert templates dynamically:

https://www.discovermeteor.com/blog/blaze-dynamic-template-includes/

Meteor doc: http://docs.meteor.com/#/full/template_dynamic

Basically this came up:

<template name="dialog">
  <div class="modal fade" id="{{dialogId}}">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title">{{dialogTitle}}</h4>
        </div>
        <div class="modal-body">
           {{> Template.dynamic template=modalBodyTemplate }}
        </div>
      </div>
    </div>
  </div>
</template>

And the javascript:

Blaze.renderWithData(Template.dialog,
  {
    dialogTitle: 'My dialog Title',
    dialogId: dialogId,
    modalBodyTemplate: 'myTemplate',
  },
  $('body').get(0)
);