How to insert a template inside a meteoric IonPopup.show

Question

I'm trying to have a rating form inside a Meteoric IonPopup. I have a button to show the form:

Template.thing.events({
  'click [data-action="showReview"]': function(event, template) {
    IonPopup.show({
      title: 'Leave a review',
      cssClass : '',
      templateURL: 'reviewPopup.html',
      buttons: [{ 
        text: 'Cancel',
        type: 'button-default',
        onTap: function(e) {
          e.preventDefault();
        }
      }, {
        text: 'OK',
        type: 'button-positive',
        onTap: function(e) {
          return scope.data.response;
        }
      }]
    });
  }
});

which ideally should put reviewPopup.html in the body

reviewPopup.html

<template name="reviewPopup">
    {{#if currentUser}}
        Rating: {{> rating}}
    {{/if}}  
</template>

<template name="rating">
    <div class="rateit"></div>
</template>

However I can't seem to get the templateURL option to work. Both templates are in the same directory. Am I correct in thinking that I give it a file name and it just inserts the content of that file into the body? The docs for IonPopup.show say:

templateUrl: '', // String (optional). The URL of an html template to place in the popup   body.

Answer 1

It looks like you are referring to the ionic docs - meteoric follows ionic conventions, but not so closely that you can assume the implementations are the same. The best way to use meteoric is by studying the example meteoric apps and looking through their code.

In this case, the relevant code from the meteoric repo looks like this:

// Figure out if a template or just a html string was passed
var innerTemplate = '';
if (options.templateName) {
  innerTemplate = Template[options.templateName].renderFunction().value;
} else if (options.template) {
  innerTemplate = '<span>' + options.template + '</span>';
}

..so it looks like you want to use templateName: and your template's name, instead of ionic's templateURL. Hope that helps!!

Answer 2

The template specified in TemplateName can only contain static HTML content or it won't render at all. I'm using the following workaround to dynamically insert the actual content:

IonPopup.show({
       title: 'notification',
       templateName: 'dummyTemplate',
        buttons: [{
          text: 'Ok',
          type: 'button-positive',
          onTap: function() {
            IonPopup.close();
            }
        }]
});

//Insert the actual template in the popup:
Blaze.render(Template.actualTemplate, $('#popupContent')[0]);

Templates:

<template name="dummyTemplate">
<div id="popupContent>
</div>
</template>

<template name="actualTemplate">
Actual content
</template>