How do I disambiguate nested routes in ember.js?

Question

I have two resources that both have the same sub-resource:

App.Router.map(function() {
  this.resource('post', function() {
    this.resource('comments', function() {
      this.route('new');
    });
  });

  this.resource('product', function() {
    this.resource('comments', function() {
      this.route('new');
    });
  });
});

The problem is that the ember router builds the names of the route objects out of just the current and parent routes, not out of the whole hierarchy. Thus, it tries to route both /posts/:id/comments/new and /products/:id/comments/new to the App.NewCommentRoute object. What can I do to fix this?

This post was adapted from a GitHub issue.

Answer 1

I took James A. Rosen's solution one step further and it worked like a charm. A bit redundant, but makes things much more intuitive down the road:

App.Router.map(function() {
  this.resource('post', function() {
    this.resource('post.comments', { path: '/comments' }, function() {
      this.route('new');
    });
  });

  this.resource('product', function() {
    this.resource('product.comments', { path: '/comments' }, function() {
      this.route('new');
    });
  });
});

This now allows you to use transitionTo('product.comments.new') or App.register('route:product.comments.new', myRouteHandler) just as originally expected.

If you don't manually register your route handler, Ember, gracefully, will even look for it in App.ProductCommentsNewRoute

The only downside is the redundancy of defining the name of the sub-resource with the same root name that the parent resource already has.

Answer 2

When you specify a route, the path defaults to the name of the route, but you can override that behavior. You can disambiguate deeply-nested routes by adding more information to the name. There are two ways to achieve essentially the same outcome:

App.Router.map(function() {
  this.resource('post', function() {
    this.resource('postComments', { path: '/comments' }, function() {
      this.route('new');
    });
  });

  this.resource('product', function() {
    this.resource('productComments', { path: '/comments' }, function() {
      this.route('new');
    });
  });
});

App.Router.map(function() {
  this.resource('post', function() {
    this.resource('comments', function() {
      this.route('newPost', { path: '/new' });
    });
  });

  this.resource('product', function() {
    this.resource('comments', function() {
      this.route('newPost', { path: '/new' });
    });
  });
});

In both cases, the router will now look for App.NewPostCommentsPath and App.NewProductCommentsPath. The advantage of the first over the second is that if you want to refer to the routes externally, they look like "postComments.new" instead of "comments.newPost". The former reads better to me.

Answer 3

As two years has passed, Ember has improved a lot.

Since Ember 1.7, routes can also has subroutes: http://emberjs.com/blog/2014/08/23/ember-1-7-0-released.html#toc_new-features.

So we can rewrite this as:

this.route('post', function() {
    this.route('comments', { path: '/comments' }, function() {
        this.route('new');
    });
});

this.route('product', function() {
    this.route('comments', { path: '/comments' }, function() {
        this.route('new');
    });
});