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

【问题标题】：How to write Iron-router nested template?如何编写 Iron-router 嵌套模板？
【发布时间】：2014-11-13 14:11:45
【问题描述】：

我有 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，我应该怎么写？

【问题讨论】：

标签： meteor iron-router meteor-blaze

【解决方案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},
      ...
    };
  },
});

【讨论】：