Override Ember application.hbs template

3
votes

I have an Ember JS application with 99% of it's resources on the root level, which the user has to be logged in to access. All those resources, with the exception of /login, have the same template.

/login, however, has an entirely different template (no nav bar, 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 a sort of parent route for the authenticated routes, like so:

this.route('login');
this.route('main', { path: '/' }, function() {
  this.route('posts');
});

That solution yields the right URL's, but it means link-to helpers and such have to use 'main.posts', etc routes, which rubs me the wrong way, and I'd like not to have that extraneous route level all over the place.

In Rails, I'd just say something like layout: nil, and and that would prevent the main template from being applied. Is there any equivalent in Ember, or another way to achieve the same goal cleanly?

2
javascriptember.jsember-clihandlebars.js

2 Answers

3
votes

To get rid of {{link-to 'main.posts'}}. You can add {resetNamespace:true} to a given route.

this.route('main', {path:'/'}, () => {
    this.route('posts', {resetNamespace:true});
});

{{link-to 'posts'}} will navigate to your posts route

0
votes

I got 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 this

    //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}}