Why does Ember Router only allow navigating to leaf routes?

Question

Something I have noticed recently with Ember Router is it only allows navigating to leaf routes — routes without child routes.

Now unless I\'m doing things incorrectly t

Answer 1

I think this issue is resolved. I am using ember routes without an index and do not face any leaf state issues. I was browsing why we need an index at all and I landed up here. Is there any other reason for using the index state too?

Answer 2

The best way I've found to do this is to have a root.projects.index state with a route of "/" and nothing else. This way every page has it's own specific 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)
  )
)

N.B. That being said I'm doing a similar thing with a 3 column layout, and am matching the middle and right column to the routes as above and adding the left column in a shared layout to each of the possible middle views.