How to write a nested Iron-router template?

Question

I have 2 templates:

1) mainLayout.html→ the general layout that should be used by all pages. (e.g. page title, navigator, footer)

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

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

2) specialLayout.html→ a custom layout that inherits main-layout.html, but with an additional template (e.g. side / tab menu)

How to determine specialLayout? Note that you specialLayoutmust have a header, navigator, and footer defined in mainLayout.

If I have an X route that I want to use specialLayout, how can I write it?

Answer 1

, :

• , :

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

• :

  <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>
  

  data:

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