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

问题描述：

我有2个模板:

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

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->自定义布局，它继承了main-layout.html但带有其他模板(例如侧面/标签菜单)

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

我应该如何定义specialLayout?请注意，specialLayout应该具有在mainLayout中定义的标题，导航栏和页脚.

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

如果我有要使用specialLayout的路线X，应该怎么写?

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

答

目前我还不知道任何简单的方法，但是大多数事情可以通过几种不太优雅的方法来实现:

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>

然后在相应的路由中启用data中的侧边栏:

Then in the appropriate routes enable sidebar in the data:

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

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

相关推荐