Warum erlaubt Ember Router nur das Navigieren zu Leafrouten?

Question

Etwas, das ich kürzlich mit dem Ember Router bemerkt habe, ist, dass es nur erlaubt, zu Blattrouten zu navigieren - Routen ohne Kinderrouten.

Jetzt, wenn ich die Dinge nicht falsch mache, dann scheint dies ein Fehler/Fehler im Design.

Nehmen wir zum Beispiel so etwas wie dieses nehmen:

Ich habe eine Sammlung von Projekten, jedes Projekt viele Mitarbeiter hat, damit ich eine Benutzeroberfläche mit einem 3-Spalten-Layout (so etwas wie Ihre Standard-Desktop-E-Mail-Client aufbauen wollen) wo auf der linken Seite ich eine Liste von Projekten habe, wenn man auf ein Projekt klickt, zeigt die mittlere Spalte eine Liste von Kollaborateuren, und das Klicken auf einen Kollaborateur lädt seine Details in die rechte Spalte.

Jetzt mit dem Routing Ich möchte zu /projects/1 navigieren, wenn Sie auf ein Projekt und auf /projects/1/collaborators/23 klicken, wenn Sie auf einen Mitarbeiter klicken.

Hier ist ein Router den ersten Teil des verschachtelten Route darstellt:

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

Wie Sie sehen Ember nicht updateRoute nicht nennen (die URL gesetzt), bis aufgrund dieser Linie zu root.projects.show Übergang https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/routable.js#L81

Hat jemand anderes so etwas getan? Gibt es einen besseren Weg, dies zu entwerfen?

Answer 1

Der beste Weg, den ich gefunden habe, ist ein root.projects.index Zustand mit einer Route von "/" und nichts anderes. So hat jede Seite ihren eigenen spezifischen Status.

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. Davon abgesehen mache ich eine ähnliche Sache mit einem 3-Spalten-Layout und passe die mittlere und rechte Spalte an die Routen wie oben an und füge die linke Spalte in einem gemeinsamen Layout zu jeder der möglichen mittleren Ansichten hinzu.

Answer 2

Ich denke, dieses Problem ist gelöst. Ich benutze Glut-Routen ohne einen Index und keine Probleme mit dem Blattstatus. Ich habe gesucht, warum wir überhaupt einen Index brauchen und bin hier gelandet. Gibt es noch einen anderen Grund, den Indexstatus zu verwenden?