Routes inside Routes EmberJS

Question

I'm aware that ember doesn't support this, as per http://emberjs.com/guides/routing/defining-your-routes/ : "You cannot nest routes, but you can nest resources"

But what I'm trying to do seems reasonable, so I'm assuming there's support for this somewhere.

The goal here is to have a structure like this:

this.resource('project', { path: '/project/:project_id' }, function(){

      this.route('manage', function(){
          this.route('settings');
          this.route('team');
          this.route('notifications');
          /* etc */
      });

 });

In words, I'd like to have a "manage" section with subsections for the things you can manage, all of which referencing my "project" instance.

I could do this:

this.resource('project', { path: '/project/:project_id' }, function(){

      this.route('manage.settings',{path : '/manage/settings'});
      this.route('manage.team',{path : '/manage/team'});
      /*etc*/

});

But where this fails is:

I can't share a nav between resource subsections (i.e have a manage template with an outlet that is populated by the sub route)
My settings.hbs doesn't isn't accessing the parent resource (I'm sure this is fixed inside the router config's "model" or "setupController" hooks, I'm just not sure which / how)

Any help?

Mike Grassotti Mike Grassotti · Accepted Answer · 2013-08-03T07:17:42

Why not use a nested resource?

this.resource('project', { path: '/project/:project_id' }, function(){
  this.resource('manage', function(){
      this.route('settings');
      this.route('team');
      this.route('notifications');
      /* etc */
  });
});

This is not so different from the post/comments resources described in the ember guides: http://emberjs.com/guides/routing/defining-your-routes/#toc_nested-resources

I'd like to have a "manage" section with subsections for the things you can manage, all of which referencing my "project" instance.

Ok. So using nested-resources approach you will have a manage.hbs template. To reference the project instance from the manage section or any of the subsections just use needs like this:

App.ManageController = Ember.Controller.extend({
  needs: "project",
  projectBinding: "controllers.project"
});

See http://emberjs.com/guides/controllers/dependencies-between-controllers/ for more detail.

Routes inside Routes EmberJS

1 Answers