2012-07-08 2 views
6

Ember Routerで私が最近気づいたのは、葉のルート - 子ルートのないルートのみをナビゲートできることです。Ember Routerはリーフルートへの移動のみを許可するのはなぜですか?

私が間違ってやっていない限り、これは設計上のバグ/ミスのようです。

のは、例えば次のようなものを見てみましょう:

私はプロジェクトのコレクションを持って、各プロジェクトには多くの協力者を持っている、これで私は3カラムレイアウトでUIを構築したい(あなたの標準的なデスクトップメールクライアントのようなもの)ここでは左側にプロジェクトのリストがあり、プロジェクトをクリックすると中央の列に共同編集者のリストが表示され、共同編集者をクリックすると詳細が右側の列に表示されます。

ルーティングでは、プロジェクトをクリックすると/projects/1に、協力者をクリックすると/projects/1/collaborators/23に移動します。ここで

は、ネストされたルートの最初の部分を示すルータです:

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

あなたはエンバーはhttps://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/routable.js#L81

ので、このラインの root.projects.showに移行するまでupdateRoute(URLを設定)を呼び出していませんわかるように

他に誰もこのようなことをしていますか?これを設計するより良い方法はありますか?

答えて

7

これを行う最良の方法は、root.projects.indexの状態を「/」というルートと他にはない状態にすることです。このように、すべてのページには固有の状態があります。

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.それは私が3列のレイアウトで同様のことをしていると言われており、中間の列と右の列を上記のようにマッチさせ、共有レイアウトの左の列を可能な中間のビューのそれぞれに追加しています。

+0

ありがとう、ブラッドリー、そのトリックを行うようです。 – Ivan

+0

非常に賢い。先端に感謝します。 – nembleton

+0

@BradleyPriest私はこれについて[質問](http://stackoverflow.com/questions/11377498/ember-js-crud-scenarios-specifying-view-from-within-a-route)を持っています。私はEmber.RouterをCRUDシナリオでどのように使用するのかを理解するのが難しいと感じています。あなたは見てみることができますか? – MilkyWayJoe

2

この問題は解決したと思います。私はインデックスなしでエバールートを使用しており、リーフ状態の問題に直面していません。私はなぜインデックスが必要なのかを調べていたので、ここに上陸しました。インデックス状態を使用する他の理由はありますか?

関連する問題