Use multiple layouts in EmberJS

Question

I have a web application that should use a different layout depending on where it is located.

Basically, if I’m on the Profile page, I’d like to use a specific application layout and a specific page layout. If I go to another "Messages" page, I would like to use a different application layout and a different page layout. I need to combine them to render my page.

Is there a way to do something like this?

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

Another detail, the route should not affect these changes. I do not have to add a level to my page to select the correct layout.

Thank!

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

..