Ember router naming conventions

Question

I have a need for deep nesting some routes in ember, I have something like this.

  this.resource('wizards', {
    path: '/wizards'
  }, function() {
    this.resource('wizards.google', {
      path: '/google'
    }, function() {
      this.resource('wizards.google.register', {
        path: '/register'
      }, function() {
          this.route('step1');
          this.route('step2');
          this.route('step3');
          this.route('summary');
      });
    });
  });

What I was expecting was as structure like this:

url        /wizards/google/register/step1
route name wizards.google.register.step1
route      Wizards.Google.Register.Step1Route
Controller Wizards.Google.Register.Step1Controller
template   wizards/google/register/step1

but I got this:

url        /wizards/google/register/step1 //as expected
route name wizards.google.register.step1 //as expected
route      WizardsGoogle.Register.Step1Route
Controller WizardsGoogle.Register.Step1Controller
template   wizards/google.register.step1

What I don't get is when does ember stop using capitalization (WizardsGoogle) and start using namespaces (WizardsGoogle.Register). The seemingly inconsistency confuses me. I would have expected either of them.

Answer 1

I met the same things with deep nested resources. Although I didn't know how this happens, what I can tell is that you can always use CapitalizedNestedRoute without namespace, and Ember can recognize it. Although in Ember Inspector it displays "WizardsGoogle.Register.Step1Route".

In your example I defined such route:

App = Em.Application.create();

App.Router.map(function() {
  this.resource('wizards', function() {
    this.resource('wizards.google', function() {
      this.resource('wizards.google.register', function() {
        this.route('step1');
        this.route('step2');
        this.route('step3');
      });
    });
  });
});

App.IndexRoute = Em.Route.extend({
  beforeModel: function() {
    // Transition to step1 route
    this.transitionTo('wizards.google.register.step1');
  }
});

App.WizardsGoogleRegisterStep1Route = Em.Route.extend({
  model: function() {
    // You can see this alert when you enter index page.
    alert('a');
  }
});

In this example the app will transition to WizardsGoogleRegisterStep1Route with no problem. And if you use container to find route like this:

App.__container__.lookup('route:wizards.google.register.step1').constructor

It will also display App.WizardsGoogleRegisterStep1Route. It's the same as Ember Guide describes. http://emberjs.com/guides/routing/defining-your-routes/#toc_nested-resources And Ember Guide doesn't introduce namespace route.

So I think it's better to according to what Ember Guide suggests (always use CapitalizedNestedRoute). And in my opinion it's easier to define CapitalizedNestedRoute than nested.namespace.route.

Finally, if you really want to use namespace route/controller/template, you can have a look at Ember.DefaultResolver. Check the API to learn how to extend it so container can lookup modules by your own rules.

Answer 2

Routes are "namespaced" inside resources. And resources uses what you call capitalization, where they sort of define a namespace (for routes to use).

So this set of routes:

App.Router.map(function() {
  this.resource('posts', function() {
    this.route('new');
    this.route('old');
    this.route('edit');
    this.route('whatever');
  });
});

Would result in routes with the following name:

PostsRoute
PostsNewRoute
PostsOldRoute
PostsEditRoute
PostsWhateverRoute

Whereas, the following set of routes:

App.Router.map(function() {
  this.resource('posts', function() {
    this.resource('photos');
    this.resource('comments');
    this.resource('likes');
    this.resource('teets');
  });
});

Would result in route with the following names:

PostsRoute
PhotosRoute
CommentsRoute
LikesRoute
TeetsRoute

Also note, that resources within resources don't get "namespaced" to the "parent" resource, so you'll always ever have the form:

{CapitalizedResourceName}Route // for resources
{CapitalizedParentResourceName}{RouteName}Route // for routes

I hope this helps you!