javascript - 在 EmberJS 中使用多重布局

Question

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

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

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

profile.js( View )

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

messages.js( View )

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

forums.js( View )

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 中设置它，但这可能会稍微复杂一些。