Meteor Iron Router layout template

Question

This seems like a basic one but i can't get Iron Router to render my template in the correct place on the page.

In my router controller I have:

Router.configure({
    loadingTemplate: 'loading',
    notFoundTemplate: 'notFound'
});

Router.map(function () {
    this.route('home', {
        path: '/',
        template: 'home',
        layoutTemplate: 'layout'
    });

    this.route('posts', {
    });

    this.route('post', {
        path: '/posts/:_id'
    });
});

In the layout html page I have:

<body>
    <!-- some other static page stuff here -->

    <div class="container">
        <template name="layout">
           {{yield}}
        </template>
    </div>
</body>

Basic version of home template looks like:

<template name="home">
    <h1>Home Page</h1>
</template>

I have tried a few variation on this but the home template is always rendered at the bottom of the layout template just before the closing body tag rather than in the div.container

Tarang Tarang · Accepted Answer · 2014-02-17T08:49:43

You've placed the tags a bit incorrectly.

Templates need to be on their own & the body tag should be empty:

<body>
<!-- There isn't anything here really -->
</body>

<template name="layout">
    <div class="container">
  {{>yield}}
    </div>
</template>

This should work for your home route but not your post ones, because you haven't given them a layout template.

You can set a universal layout so it would work on posts and home (if you didn't set a layout template there - which overrides the one below) using:

Router.configure({
    loadingTemplate: 'loading',
    notFoundTemplate: 'notFound',
    layoutTemplate: 'layout'
});

So iron-router places your layoutTemplate in body for you.

Meteor Iron Router layout template

1 Answers