javascript - 在 EmberJS 中使用多个布局

Question

我有一个 web 应用程序需要根据它的位置使用不同的布局。

基本上，如果我在“个人资料”页面内，我想使用特定的应用程序布局和特定的页面布局。如果我要去另一个页面“消息”，我想使用另一个应用程序布局和另一个页面布局。我需要将它们组合起来以呈现我的页面。

有没有办法做这样的事情？

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}}

这是一个演示总体思路的 plnkr：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'
});

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