Geek Answers Handbook

Meteor Iron Router Layout Template

This seems like a basic one, but I cannot get the Iron Router to display my template in the right 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 of the html page I have:

 <body> <!-- some other static page stuff here --> <div class="container"> <template name="layout"> {{yield}} </template> </div> </body>

The basic version of the house template is as follows:

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

I tried several variations of this, but the home template is always displayed at the bottom of the layout template immediately before the closing body tag, and not in the div.container

+7
meteor
source share
1 answer

You have tagged incorrectly.

The templates should be on their own, and 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 for your post , because you did not give them a layout template.

You can set up a universal layout so that it works on posts and home (unless you have installed a layout template there that overrides the one below) using:

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

Thus, the iron router puts your layout in the body for you.

+19
source share

More articles:


All Articles