Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Meteor Iron Router layout template

Tags:

meteor

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

like image 610
jamie holliday Avatar asked Feb 17 '14 08:02

jamie holliday


1 Answers

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.

like image 86
Tarang Avatar answered Sep 23 '22 11:09

Tarang