Emberで{{link-to}}をアクティブにする

Question

私のEmberアプリケーションでは、グループにナビゲーションバーがあります。それぞれのユニークなアイテムは、バーで二回表示されます。独自のグループにし、「すべてのアイテム」グループに：

ユーザーが項目3を選択した場合、両方のリンクがactive CSSクラスを取得することでアクティブになる：

ユーザーがクリックしたリンクがアクティブになるようにコードを変更するにはどうすればよいですか？ユーザーが/ item/3 URLを手動で開くと、最初のリンクだけが有効になります。ここで

は、これまでの私のコードです： http://jsbin.com/yidofayoma/3/edit?html,js,output

var App = Ember.Application.create({ 
    rootElement: '#app' 
}); 

App.Router.map(function() { 
    this.route('item', { path: '/item/:item_id' }); 
}); 

App.ItemRoute = Ember.Route.extend({ 
    model: function(params) { 
    return params.item_id; 
    } 
}); 

ナビゲーションバーテンプレート：

<ul> 
    <li>{{#link-to "index"}}Index{{/link-to}}</li> 
    <li> 
    All items 
    <ul> 
     <li>{{#link-to "item" 1}}Item 1{{/link-to}}</li> 
     <li>{{#link-to "item" 2}}Item 2{{/link-to}}</li> 
     <li>{{#link-to "item" 3}}Item 3{{/link-to}}</li> 
     <li>{{#link-to "item" 4}}Item 4{{/link-to}}</li> 
     <li>{{#link-to "item" 5}}Item 5{{/link-to}}</li> 
    </ul> 
    </li> 
    <li> 
    Group A 
    <ul> 
     <li>{{#link-to "item" 1}}Item 1{{/link-to}}</li> 
     <li>{{#link-to "item" 2}}Item 2{{/link-to}}</li> 
     <li>{{#link-to "item" 3}}Item 3{{/link-to}}</li> 
    </ul> 
    </li> 
    <li> 
    Group B 
    <ul> 
     <li>{{#link-to "item" 4}}Item 4{{/link-to}}</li> 
     <li>{{#link-to "item" 5}}Item 5{{/link-to}}</li> 
    </ul> 
    </li> 
</ul> 
<hr /> 

{{outlet}} 

エンバーバージョン：2.4.2

Answer 1

項目ルートへgroupクエリパラメータを追加します。

App.ItemRoute = Ember.Route.extend({ 
    queryParams: { 
    group: {} 
    }, 
    model: function(params) { 
    return params.item_id; 
    } 
}); 

次に、各リンクにgroupクエリパラメータを追加します。

<ul> 
    <li>{{#link-to "index"}}Index{{/link-to}}</li> 
    <li> 
    All items 
    <ul> 
     <li>{{#link-to "item" 1 (query-params group="all")}}Item 1{{/link-to}}</li> 
     <li>{{#link-to "item" 2 (query-params group="all")}}Item 2{{/link-to}}</li> 
     <li>{{#link-to "item" 3 (query-params group="all")}}Item 3{{/link-to}}</li> 
     <li>{{#link-to "item" 4 (query-params group="all")}}Item 4{{/link-to}}</li> 
     <li>{{#link-to "item" 5 (query-params group="all")}}Item 5{{/link-to}}</li> 
    </ul> 
    </li> 
    <li> 
    Group A 
    <ul> 
     <li>{{#link-to "item" 1 (query-params group="a")}}Item 1{{/link-to}}</li> 
     <li>{{#link-to "item" 2 (query-params group="a")}}Item 2{{/link-to}}</li> 
     <li>{{#link-to "item" 3 (query-params group="a")}}Item 3{{/link-to}}</li> 
    </ul> 
    </li> 
    <li> 
    Group B 
    <ul> 
     <li>{{#link-to "item" 4 (query-params group="b")}}Item 4{{/link-to}}</li> 
     <li>{{#link-to "item" 5 (query-params group="b")}}Item 5{{/link-to}}</li> 
    </ul> 
    </li> 
</ul> 

これは、アクティブな1つのリンクのみになります。欠点は、すべてのアイテムURLに追加のクエリ文字列パラメータです（例： /item/5?group=all。

デモ：http://jsbin.com/josogumaqo/edit?html,js,output

Answer 2

まず、私は、それは非常に興味深い質問ですね言いたいあなたに感謝します。

あなたは、@パベル・chuchuvaが示唆されているように行う、または（追加のパラメータを避け、URLはユーザーフレンドリーにするために）グループごとに別々のルートを作成することがあります。

App.Router.map(function() { 
    this.route('all', { path: '/all/:item_id' }); 
    this.route('a', { path: '/a/:item_id' }); 
    this.route('b', { path: '/b/:item_id' }); 
}); 

あなたが持っ避けるために、混合を作成することも

App.AllRoute = Ember.Route.extend(itemsRoute, {}); 
App.ARoute = Ember.Route.extend(itemsRoute, {}); 
App.BRoute = Ember.Route.extend(itemsRoute, {}); 

：同じコード

var itemsRoute = Ember.Mixin.create({ 
    model: function(params) { 
    /*return something useful*/ 
    return params.item_id; 
    } 
}); 

の3つのコピーがそのミックスインからすべて、AとBの経路を拡張します

作業例：http://jsbin.com/nibacogeye/edit?html,js,output