Dynamically loading templates (partials) using Blaze Meteor.js

Question

Is there any way to dynamically load a template with onCreated method of Meteor.js? I have different template and one display area (main template).

<template name="main">

</template>

default loaded template

<template name="default">
</template>

Loaded templates via links

<template name="page1">
</template>

<template name="page2">
</template>

Is there a way I can use oncreated function to load the default, and remove (default) and load other template in the same main template when they are clicked?

Answer 1

Check out Template.dynamic.

It allows you to load a template only by its name. Easy thing here because you can let your template handle dynamic names by using a Reactive var or Reactive Dict.

Declare some templates:

<template name="main">
 {{> Template.dynamic template=getTemplateName }}

 <button class="loadTemplate" data-target="page1">Load Page 1</button> 
 <button class="loadTemplate" data-target="page2">Load Page 2</button> 
</template>

<template name="page1">
</template>
<template name="page2">
</template>

<template name="default">
</template>

In your main template you can set in onCreated the default template name default:

Template.main.onCreated(function(){
  this.state = new ReactiveDict();
  this.state.set("targetTemplate", "default");
})

Get the template to load via helper:

Template.main.helpers({
  getTemplateName() {
    return Template.instance().state.get("targetTemplate");
  },
})

And set the new template name by button click event:

Template.main.events({
  'click .loadTemplate'(event, templateInstance) {
    event.preventDefault();
    const targetName = $(event.currentTarget).attr('data-target');
    templateInstance.state.set("targetTemplate", targetName);
  }
})

You can of course do this also by other events than only by clicking a button, since it depends on a ReactiveDict / ReactiveVar it will render the new template if the variable updates.

Note: Very important is to handle the data that is passed to the template, too. Once your dynamic template becomes more complex you have to be more aware of that, too.