Use multiple layout in EmberJS

Question

I have a web application that needs to use different layout depending where it is.

Basically, if I'm inside the page "Profile", I would like to use a specific app layout and a specific page layout. If I'm going to another page "Messages", I would like to use another app layout and another page layout. I need to combine them to render my page.

Is there a way to do something like that?

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 impact those changes. I shouldn't add a level in the route of my page to select the right layout.

Thanks!

Answer 1

You could just create your various layouts as components, and add them at the template level for each route. Then each template would directly control the specific layout(s) that it is embedded in, and what nesting order. Something like this:

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

Here's a plnkr demonstrating the general idea: http://plnkr.co/edit/ULuajptCB4n93swhnwiT?p=preview

You could also set it in the View like you have above, but that may be a little more complicated.