How to use nested template in Iron-router?


#1

One page of my app should look like this:

|                   header                           |
|     sidebarmenu01         main01                   |
|     sidebarmenu01         main01                   |
|     sidebarmenu01         main01                   |
|     sidebarmenu01         main01                   |
|                   footer                           |

So I defined 2 templates:

  1. ApplicationLayout.html -> Application Layout: header, main, footer

    Router.configure({
    layoutTemplate: ‘ApplicationLayout’
    })

    {{> header}}
    {{> yield}}
    {{> footer}}
  2. Page01Layout.html -> layout for the above page.

    Page01Controller = RouteController.extend({
    layoutTemplate: ‘Page01Layout’,
    });

    this.route(’/page01/main01’, {
    template: ‘Page01Main01’,
    controller: Page01Controller,
    });

    {{> yield SidebarMenu}}
    {{> yield }}
    main 01

But what I got looks like this:

|     sidebarmenu01         main01                   |
|     sidebarmenu01         main01                   |
|     sidebarmenu01         main01                   |
|     sidebarmenu01         main01                   |

The ApplicationLayout is ignored.

How can I get what I want?


#2

@sato1 here’s one way of handling nested templates using iron router.

Use one template:

<template name="applicationLayout">
  {{> yield "header"}}
  {{> yield}}
  {{> yield "footer"}}
</template>

<template name="home">
  <div>Home</div>
</template>

<template name="header">
  <div>Header</div>
</template>

<template name="footer">
  <div>Footer</div>
</template>

Configure the router:

Router.configure({
  layoutTemplate: 'applicationLayout'
})

Router.route('/', function() {
  this.render('header', {to: 'header'});
  this.render('home');
  this.render('footer', {to: 'footer'});
});

Hope it helps.


#3

What I want is Page01Layout inside ApplicationLayout, which means nested layouts.


#4

You are technically overriding the default template when you specify another template in the controller, which means the entire page will be rendered using the new template. I’m not sure iron router supports this feature at this moment.

Please check this link:


#5

@sato1 :+1: on this question. I’m confused on this same scenario, although I feel like there may be a different way of doing it without actually nesting layouts. If anyone’s still watching this thread, is there any advice on this?


#6

Looks like nested layouts are a feature request in Iron Router. Also, looks like there’s already a package for nesting layouts (although the documentation is confusing me a bit) called Iron Layout

This github thread helped me understand - https://github.com/iron-meteor/iron-router/issues/1125

Link to iron-layout https://github.com/iron-meteor/iron-layout

Apologies for responding to this old thread, but I think the above info may be useful to someone