Why does Ember Router only allow route navigation?

Question

Something that I recently noticed with the Ember Router is only to allow navigation on leaf routes - routes without children's routes.

Now, if I do it wrong, this seems like a design error / error.

Take for example something like this:

I have a set of projects, each project has many collaborators, with this I want to create a user interface with a three-column layout (something like your standard email client), where on the left I have a list of projects, when I click on the project, the middle column displays a list of collaborators, and clicking on a collaborator loads its data into the right column.

Now, with the help of routing, I want to go to /projects/1 when I click on a project and to /projects/1/collaborators/23 when I click on a co-author.

Here is a router illustrating the first part of a nested route:

 App.reopen( Router: Ember.Router.extend( enableLogging: true location: 'hash' root: Ember.Route.extend( index: Ember.Route.extend( route: '/' redirectsTo: 'projects' ) projects: Ember.Route.extend( # This route is not routable because it is not a leaf route. route: '/projects' connectOutlets: (router) -> # List projects in left column router.get('applicationController').connectOutlet('projects', App.projects) show: Ember.Route.extend( # This route is routable because it is a leaf route. route: '/:project_id' connectOutlets: (router, project) -> # Render the project into the second column, which actually renders # a list of collaborators. router.get('projectsController').connectOutlet('project', project) ) ) ) ) ) 

As you will see, Ember does not call updateRoute (set the URL) before going to root.projects.show because of this line https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib /routable.js#L81

Has anyone else done something like this? Is there a better way to develop this?

Answer 1

The best way I've found to do this is to have root.projects.index state with the "/" route and nothing else. Thus, each page has its own state.

 projects: Ember.Route.extend( # This route is not routable because it is not a leaf route. route: '/projects' connectOutlets: (router) -> # List projects in left column router.get('applicationController').connectOutlet('projects', App.projects) index: Ember.Route.extend( route: "/" ) show: Ember.Route.extend( # This route is routable because it is a leaf route. route: '/:project_id' connectOutlets: (router, project) -> # Render the project into the second column, which actually renders # a list of collaborators. router.get('projectsController').connectOutlet('project', project) ) ) 

NB This means that I am doing a similar thing with a 3-column layout and map the middle and right columns to the routes, as indicated above, and add the left column to the overall layout to each of the possible middle views.

Answer 2

I think this problem is resolved. I use ember routes without index and do not encounter sheet state issues. I looked over why we needed an index, and I landed here. Is there any other reason to use index state?