Multiple layouts

1

in my emberjs application I want to have two different layout for example application template and another template for other models and controllers ,I don’t want all my views to be rendered in the application template ,like in rails when you can specify to have multiple layouts for different controllers

2

Hi,

I had the same issue, and here is the solution that @alexspeller told me on IRC:

  1. Create two views for the two layouts with the “layoutName” property:

    module.exports = App.MainLayoutView = Ember.View.extend({ layoutName: ‘layout/main’, });

and:

module.exports = App.SecondaryLayoutView = Ember.View.extend({
  layoutName: 'layout/secondary',
});

  1. Create two templates for the layout, called “layout/main” and “layout/secondary”.

  2. Make sure that your views extends those layout views. For example, imaging the following route config:

    module.exports = App.Router.map(function() { this.resource(‘users’, function() { this.route(‘new’); });

    this.route(‘login’); });

If you want all the users route to be using MainLayout and login to be using the Secondary layout, create two views:

App.ProjectsView = App.MainLayoutView.extend();

and

App.LoginView = App.SecondaryLayoutView.extend();

There is no need to create a view for “projects/new” because it is a nested route of projects, hence inheriting the layout of Projects.

Hope it helps!

2 Likes
3

It worked great in defining the two layouts but the controller templates not insearted for example I have a profiles controller ,I extend it from second layout ,when I log to the routes profiles it give me the secondry layout with no the profiles template

4

i must change the outlet in application.hbs from outlet to yield to make it work

5

I have changed my layouts as well with this concept but found nested routes have weird side effects now. I want to achieve the following view hierachy:

  • Application
    • Group
      • Group.index

Unfortunately it results in this:

  • Application
    • Group
      • Group.index
      • Group.index

I can only remove the second Group.index if I remove the {{outlet}} from group.hbs. But then I can’t controll where the outlet should be rendered. Currently the group.index is appended.

I am facing even more issues, with this approach: My Main is now rendered in the {{yield}} of my template. Unfortunately I want to use ember animated outlet which is not working with {{yield}}

I am really stuck with this and cant find a way around it