¿Por qué Ember Router solo permite navegar a las rutas de hoja?

Question

Algo que he notado recientemente con Ember Router es que solo permite navegar en las rutas de hoja (rutas sin rutas secundarias).

Ahora, a menos que haga las cosas incorrectamente, esto parece un error/error en el diseño.

Tomemos, por ejemplo, algo como esto:

tengo una colección de proyectos, cada proyecto tiene muchos colaboradores, con esto quiero construir una interfaz de usuario con un diseño de 3 columnas (algo así como su cliente de correo de escritorio estándar) donde a la izquierda tengo una lista de proyectos, al hacer clic en un proyecto, la columna del medio muestra una lista de colaboradores, y al hacer clic en un colaborador, carga sus detalles en la columna de la derecha.

Ahora con el enrutamiento quiero navegar a /projects/1 al hacer clic en un proyecto y al /projects/1/collaborators/23 al hacer clic en un colaborador.

Aquí es un router que ilustra la primera parte de la ruta anidada:

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) 
     ) 
    ) 
    ) 
) 
) 

Como verá Ember no llama updateRoute (conjunto de la URL) hasta que la transición a root.projects.show debido a esta línea de https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/routable.js#L81

¿Alguien más ha hecho algo como esto? ¿Hay una mejor manera de diseñar esto?

Answer 1

La mejor manera que he encontrado para hacer esto es tener un estado root.projects.index con una ruta de "/" y nada más. De esta forma, cada página tiene su propio estado específico.

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. Una vez dicho esto, estoy haciendo algo similar con un diseño de 3 columnas, y estoy combinando la columna del medio y la derecha con las rutas como se indica arriba y agregando la columna izquierda en un diseño compartido a cada una de las posibles vistas medias.

Answer 2

Creo que este problema está resuelto. Estoy usando rutas de ascuas sin un índice y no tengo problemas con el estado de la hoja. Estaba buscando por qué necesitamos un índice y aterricé aquí. ¿Hay alguna otra razón para usar el estado del índice también?