Meteor Flow Router nested dynamic templates

Question

I am trying to render a dynamic template inside a dynamic template.

Main Layout:

<template name="template1">
    {{>navbar}}
    <div class="container">
        {{>Template.dynamic template=content}}
    </div>
</template>

Sub-Template:

<template name="template2">
<div class="container">
    <div class="row">
        <h2>Data Input</h2>
    </div>
    <div class="row">
        <ul class="nav nav-pills">
            <li class="active"><a href="/input/inc">Inc</a></li>
            <li><a href="/input/exp">Exp</a></li>
        </ul>
    </div>
    <div class="row">
        {{>Template.dynamic template=dataSection}}
    </div>
</div>

Sub-sub-Template:

<template name="template3">
<h2>Inc</h2>
</template>

Below is my FlowRouter code. It is wrong, but I thought it might give someone an idea of what I am trying to do. FlowRouter:

FlowRouter.route('/input/income', {
action: function () {
    BlazeLayout.render("template1", {
        content: "template2"
    });
    BlazeLayout.render("template2", {
        dataSection: "template3"
    });
 }
});

I am trying to render the template2, inside of template1 and then after that I would like to render template 3 inside of template 2. Do I have to somehow render template 3 inside of template 2 before I can render that template inside of Template1?

score 4 · Accepted Answer · answered Mar 09 '16 at 22:14

You'll want to render the sub-template using a helper. Change your router code to:

action: function () {
    BlazeLayout.render("template1", {
        content: "template2"
    });
}

You only need the one render call because template2 will automatically render the given dynamic template. Now in template2 create the helper:

Template.template2.helpers({
  dataSection() {
    return "template3";
  }
});

You can replace the return statement with different logic if you want to, so long as it returns the name of a template.

score 2 · Answer 2 · answered Oct 16 '16 at 09:03

You can also do it without a template helper:

BlazeLayout.render('App_Body', {main: 'parent', sub: 'details' });

HTML for main template

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

HTML for parent-template

<template name="parent">
    Parent template
    {{> Template.dynamic template=sub}}
</template>

HTML for sub-template

<template name="details">
    Sub template
</template>

Deeplinking with routes becomes much easier:

FlowRouter.route('/todos/show/:id', {
    name: 'Todo.show',
    action(params, queryParams) {
        BlazeLayout.render('App_body', {main: 'parent', sub: 'details' });
    }
});

And then in the details template JS part you can get the id:

Template.todo.onCreated(function todoOnCreated() {
   var id = FlowRouter.getParam('id');
   // ...
});

Meteor Flow Router nested dynamic templates

2 Answers2