How to subclass an Ember class using ES6 syntax in Ember CLI

Question

I'd like to create a custom Route class in Ember CLI. I have the following example working in an older app written with globals:

App.AuthenticatedRoute = Ember.Route.Extend({ 
  beforeModel: function() { 
    //Do some things
  }
});

App.DashboardRoute = App.AuthenticatedRoute.Extend({});

I'm familiar enough with ES6 modules to know that the example would look something like this...

var AuthenticatedRoute = Ember.Route.Extend({
  beforeModel: function() { 
    //
  }
});

export default AuthenticatedRoute;

...but I'm curious about the following:

Where would this live in the app structure?
How do I access this subclass in other modules?

Update:

To clarify my question: I was looking for information about where a custom implementation like this should live as opposed to a regular child route living in the app/routes dir. Ember CLI docs call out the following:

To provide a custom implementation for generated routes (equivalent to App.Route when using globals), use app/routes/basic.js.

http://www.ember-cli.com/#module-directory-naming-structure

...but I was not able to find any examples of this in practice, and it seems like an incomplete convention. I ended up treating the custom implementation as a standard route (app/routes/authenticated.js) and importing as needed.

Yes, reading the docs is a trick I use a lot. Turns out it works better than staring into space, or throwing mud at the wall. Seriously, the Ember docs (including ember-cli) are quite comprehensive and the majority of basic stuff you need is there. For instance, it takes just a few seconds to find ember-cli.com/#naming-conventions. — user663031
@torazaburo first SO question here so my clarity could have been better, sure. I was looking for convention info, but called out syntax. Ember docs are excellent! Question updated. — Sean

Kalman Kalman · Accepted Answer · 2015-01-11T04:27:42

If you use ember-cli, which is highly recommended, this would live in app/routes/authenticated.js and look like this:

import Ember from 'ember';

export default Ember.Route.extend({
});

You can then import it in other modules as

import authRoute from 'app/routes/authenticated'

How to subclass an Ember class using ES6 syntax in Ember CLI

1 Answers