在EmberJS中使用多个布局

Question

我有一个Web应用程序需要使用不同的布局，具体取决于它。

基本上，如果我在页面内部＆＃34;个人资料＆＃34;，我想使用特定的应用布局和特定的页面布局。 如果我要转到另一个页面＆＃34;消息＆＃34;，我想使用另一个应用布局和另一个页面布局。 我需要将它们组合起来渲染我的页面。

有没有办法做类似的事情？

profile.js（查看）

export default Ember.View.extend({
   appLayoutName: 'appLayoutType1',
   layoutName: 'pageLayoutType1',
   templateName: 'profile'
});

messages.js（查看）

export default Ember.View.extend({
   appLayoutName: 'appLayoutType2',
   layoutName: 'pageLayoutType2',
   templateName: 'messages'
});

forums.js（查看）

export default Ember.View.extend({
   appLayoutName: 'appLayoutType1',
   layoutName: 'pageLayoutType2',
   templateName: 'forums'
});

另一个细节，路线不应影响这些变化。 我不应该在我的页面路线中添加一个级别来选择正确的布局。

谢谢！

Answer 1

您可以将各种布局创建为组件，并在每个路径的模板级别添加它们。然后，每个模板将直接控制它嵌入的特定布局，以及嵌套顺序。像这样：

  {{#app-layout-one}}
    {{#page-layout-one}}
      <h1>Profile route contents</h1>
    {{/page-layout-one}}
  {{/app-layout-one}}

这是一个展示总体思路的人：http://plnkr.co/edit/ULuajptCB4n93swhnwiT?p=preview

您也可以像上面一样在View中进行设置，但这可能会有点复杂。

Answer 2

使用插座。

Ember.Route.reopen({

  headerName: 'application/header',
  footerName: 'application/footer',

  renderTemplate: function () {
    this._super.apply(this, arguments);

    this.disconnectOutlet({
      parentView: 'application',
      outlet: 'header'
    });
    this.render(this.get('headerName'), {
      into: 'application',
      outlet: 'header'
    });
    this.disconnectOutlet({
      parentView: 'application',
      outlet: 'footer'
    });    
    this.render(this.get('footerName'), {
      into: 'application',
      outlet: 'footer'
    });
  }
});

App.DifferentRoute = Ember.Route.extend({
  headerName: 'different/header',
  footerName: 'different/footer'
});

您可以为页眉等扩展此模式