Ember 2中的多个布局

Question

我需要实现具有3条路线的下一个应用程序结构：

localhost/users
localhost/posts
localhost/settings

'用户'和'帖子'路线应具有带主导航栏的基本布局1。 'settings'路线应该有另一个带有第二个导航栏的layout2。

如何使用Ember＆gt;实现多种布局方法？ 2.12

我可以为每条路线或路线组设置布局名称/路径吗？

Answer 1

我可以想到两个可能的推荐方法来解决这个问题。我在不同的场景中都使用了它们。你可以：

1. 使用组件封装每个导航栏，然后在每个模板中相应地显示它们
2. 设置每个路由的templateName属性以使用正确的模板。

组件方法似乎是我体验中最容易/最常用的方法。它还允许您在基本路径模板中有差异。 e.g：

users.hbs：

{{layout1}}
<h1>Users<h1>
...

posts.hbs：

{{layout1}}
<h1>Posts</h1>
...

如果您使用templateName方法，则会被锁定使用相同的完全模板。因此，如果您需要在使用相同布局的任何页面之间进行任何自定义，则必须使用子路径。 e.g：

routes/users.js：

import Ember from 'ember';

export default Ember.Route.extend({
    templateName: 'layout1'
});

routes/posts.js：

import Ember from 'ember';

export default Ember.Route.extend({
    templateName: 'layout1'
});

templates/layout1.hbs：

<nav>...</nav>
{{outlet}}

第三种可能的方法，虽然我不一定推荐它，但是动态替换application.hbs模板中的导航栏。 application控制器/模板可以访问名为currentPath的特殊属性，您可以使用该属性创建两个计算属性（isLayout1和isLayout2）。

有了这个，这就成了一个可行的，虽然像我说的那样，不一定是推荐的解决方案：

application.hbs：

{{#if isLayout1}}
    <nav>layout 1</nav>
{{else}}
    <nav>layout 2</nav>
{{/if}}
{{outlet}}