Override application.hbs template in Emberjs

Question

In emberjs, I am in a situation that my application already has routes template that uses the application.hbs template, but now I want to create a new route templates that doesn't use application.hbs.

Is there any easy solution for that?

I have seen many answers but that doesn't match my specification and also my version of ember is 2.11.

Thank you.

application.hbs is the root template. if you don't want to use it, you'll need to restructure your routes. it may be possible to extract what is currently in application.hbs into application/index.hbs — NullVoxPopuli
If this is due to wanting different layouts, spin.atomicobject.com/2016/05/03/reusable-page-layouts-ember I would move the variable display to the children routes — mistahenry

Kevin Kevin · Accepted Answer · 2019-02-21T04:35:26

Keep application.hbs as minimal and common across all routes as you can. What you shoud do is generate top level routes for your application.

Say you have a common setup where you have an authenticated section, post login, and a login section. It is common for pre and post login to have differing top level templates. Try something like this:

ember g route login ember g route login/index ember g route login/forgot-password ember g route authenticated ember g route authenticated/index ember g route authenticated/profile etc...

Your login.hbs would have its own style, and potentially child routes, which will assume that style and place subsequent nested templates in the {{outlet}} that others have mentioned.

File Structure:

routes/
-login/
----index.hbs
----forgot-password.hbs
-authenticated/
----index.hbs
----profile.hbs
login.hbs
authenticated.hbs
application.hbs

In the example above, login.hbs might look like this:

{{yellow-navbar}}
{{outlet}}

and authenticated.hbs like this:

{{pink-navbar}}
{{user.name}}
{{outlet}}

Now, the login/index.hbs and login/forgot-password.hbs templates will render in the login.hbs outlet. both of these pages will render a yellow navbar, and then their own content.

Because authenticated.hbs is another top level parent route, both authenticated/index.hbs and authenticated/profile.hbs will render their content beneath a pink navbar and a display of the current user's name.

if your application.hbs looked like this:

{{#general-site-container}}
  <h2>Website Name</h2>
  {{outlet}}
{{/general-site-container}}

Then all of the routes, both authenticated and login, will be in the general-site-container, and will all show the h2 with the website name.

An important note in this, and something that I see a lot of people get confused with, is that this folder structure does not dictate the actual path of the route.

The router might be configured like this, to avoid showing "authenticated" in the url: Router.js

  // login.index route assumed at root url /login
  this.route('login', { path: '/login' }, function() {
    // avail at /login/forgot-password
    this.route('forgot-password', { path: '/forgot-password' }
  });

  //authenticated.index.hbs assumed at root avail at /
  //notice that the authenticated parent route has a route of "/"
  this.route('authenticated', { path: '/' }, function() { 

    // authenticated.profile route avail at /profile
    this.route('profile', { path: '/profile' });

    // as an exmaple you can further nest content to your desire
    // if for instance your profile personal info section has a parent 
    // template/route
    this.route('', { path: '/personal-info' }, function() {
      this.route('address', { path: '/address' }); //profile/personal-info/address
    });
  });

Override application.hbs template in Emberjs

2 Answers