在EmberJS中使用多個布局

Question

我有一個Web應用程序需要使用不同的布局，具體取決於它的位置。

基本上，如果我在頁面“Profile”中，我想使用特定的應用程序布局和特定的頁面布局。 如果我要轉到另一個頁面“消息”，我想使用另一個應用程序布局和另一個頁面布局。 我需要將它們組合起來渲染我的頁面。

有沒有辦法做那樣的事情？

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'
});

您可以為頁眉等擴展此模式。