如何编写Iron-router嵌套模板？

Question

我有2个模板:

1)mainLayout.html- >所有页面必须使用的一般布局.(例如页面标题,导航栏,页脚)

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

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

2)specialLayout.html- >自定义布局继承main-layout.html但附加模板(例如侧面/标签菜单)

我该如何定义specialLayout？请注意,specialLayout应该定义标题,导航栏和页脚mainLayout.

如果我有想要使用的路线X,我该specialLayout怎么写呢？

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},
        ...
      };
    },
  });