Combine multiple layouts to build my page


#1

Hello,

I have a web application that needs to use different layouts depending on the page I am on.

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.

The application layout is basically the branding of the web app (logo, navigation…)

The page layout contain the layout of the page (sidebar, components…)

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 good layout (no outlet)

Thanks!