You may have noticed that ember does a bunch of things magically for you. This is, in general, great; convention over configuration and all that. It can get confusing when you need to start adjusting the code though; where do I put it? Do I need to include any boilerplate? Are xml sit-ups involved?

(NB this is orthogonal to ember-cli’s blueprint generation)


Route Handlers

You don’t need to actually define route handlers for 75% of your routes.


Index routes are well documented in the guides; the short version is that {
  this.route('posts', function() {

is equivalent to{
  this.route('index', { path: '/' });
  this.route('posts', { path: '/posts' }, function() {
    this.route('index', { path: '/' });
    this.route('favorites', { path: '/favorites' });

All routes also automatically have loading and error subroutes, as per


Data is loaded even when no model() has been specified on a route handler; the default implementation of model for a route like

this.route('photo', { path: '/photos/:photo_id' });

does something like

return'photo', params.photo_id);

The actual low-level implementation is more magic, but this is the intended equivalent.


Unless you need to specify properties or actions, you can ignore controllers entirely. They’re going to disappear once routable components finally land.


Ember will happily generate blank templates for you, and if the route has children it’ll act as an outlet for nested content.


All components are rendered as a div around their template by default; this can be adjusted using the tagName property.

The default component template is `` so that it can be used block-style as well as inline.


Let me know what other in-memory generated magic you find!


Thanks are due to Alisdair for proof-reading and reminding me about components.