Replace Ember template application.hbs
I have an Ember JS application with 99% of its resources at the root level that a user must be logged in to access. All of these resources, except for /login
, have the same template.
/login
however has a completely different template (no navbar, etc.). What's the best way to override the application.hbs template for the login page?
Most of the answers I see in other questions involve some sort of parent route for authenticated routes, for example:
this.route('login');
this.route('main', { path: '/' }, function() {
this.route('posts');
});
This solution gives the correct urls, but it means that helper links and such have to use routes "main.posts" and so on, which annoys me wrongly and I wouldn't want to have this extraneous route layer all over the place.
In Rails, I'll just say something like layout: nil
this and it will prevent the main template from being applied. Is there any equivalent in Ember, or another way to achieve the same goal cleanly?
To get rid of {{link-to 'main.posts}}. You can add {resetNamespace: true} to the given route.
this.route('main', {path:'/'}, () => {
this.route('posts', {resetNamespace:true});
});
{{link-to 'posts'}} will navigate your posts route
I have another solution
{{!-- application.hbs --}}
{{#if session.isAuthenticated}}
{{outlet}}
{{else}}
Then the welcome/login page goes here
{{/if}}
Inspired by samselikoff in this post
====== ====== EDIT
Maybe we can even do it
//in app/routes/login.js
export default Ember.Route.extend({
renderTemplate: function() {
this.render({ outlet: 'un-auth' });
}
});
and
{{!-- application.hbs --}}
{{#if session.isAuthenticated}}
{{outlet}}
{{else}}
{{outlet "un-auth"}}
{{/if}}