How to write Iron-router nested template?

Question

I have 2 templates:

1) mainLayout.html -> general layout which must be used by all pages. (e.g. page title, navbar, footer)

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

<template name="mainLayout">
  {{> header}}
  <div class="container-fluid">
    {{> yield}}
  </div>
</template>

2) specialLayout.html -> custom layout which is inheriting main-layout.html but with additional template (e.g. side/tab menu)

How should I define specialLayout? Note that specialLayout should have the title, navbar, and footer defined in mainLayout.

If I have route X which want to use specialLayout, how should I write it?

Answer 1

I don't know any simple method at this moment, but most things can be achieved by several less elegant ways:

• Copy your common parts into separate templates and use them in both layouts, i.e.:

  <template name="mainLayout">
    {{> navbar}}
    <div>
      {{> content}}
    </div>
    {{> footer}}
  </template>
  
  <template name="specialLayout">
    {{> navbar}}
    <div>
      {{> content}}
      {{> sidebar}}
    </div>
    {{> footer}}
  </template>
  

• Make your special part an option in the main layout instead of a separate one:

  <template name="mainLayout">
    ...
    <div>
      {{#if layout.renderSidebar}}
        <div class="col-2">>
          {{> yield 'sidebar'}}
        </div>
      {{/if}}
  
      <div class="{{#if layout.renderSidebar}} col-10 {{else}} col-12 {{/if}}">
        {{> yield}}
      </div>
    </div>
    ...
  </template>
  

  Then in the appropriate routes enable sidebar in the data:

  this.map('pathName', {
    ...
    data: function() {
      return {
        layout: {renderSidebar: true},
        ...
      };
    },
  });