Multiple layouts in Ember.js?

Question

Based on the Rails background, you can have several layouts — for example, anonymous user pages, and then authenticated pages.

Is this possible with Ember?

I tried declaring a new template name in my UserRouter, to no avail.

I also checked this guide: http://emberjs.com/guides/views/adding-layouts-to-views/

But it does not seem to work: /

Answer 1

You can use {{render}} inside the if helper to display different layouts.

For example, if you have an ApplicationController that has login and logout action handlers, and the corresponding `loggedIn 'property.

 App.ApplicationController = Ember.Controller.extend({ loggedIn: false, login: function() { this.set('loggedIn', true); }, logout: function() { this.set('loggedIn', false); } }); 

You can bind to the loggedIn property inside the application template like this.

 <script type='text/x-handlebars' data-template-name='application'> <button {{action login }}>Login</button> <button {{action logout }}>Logout</button> {{#if loggedIn}} {{render 'user'}} {{else}} {{render 'guest'}} {{/if}} </script> 

Where user and guest are the corresponding patterns.

 <script type='text/x-handlebars' data-template-name='user'> <h1>User layout</h1> <div class='box user'> {{outlet}} </div> </script> <script type='text/x-handlebars' data-template-name='guest'> <h1>Guest layout</h1> <div class='box guest'> {{outlet}} </div> </script> 

This is where jsbin works.

Edit: In order not to use the application route based on some static criteria or load using model interceptors, you can override the renderTemplate ApplicationRoute method.

 App.ApplicationRoute = Ember.Route.extend({ renderTemplate: function() { var loggedIn = false; if (loggedIn) { this.render('user'); } else { this.render('guest'); } } });