Creazione di un singolo {{link-to}} attivo in Ember

Question

Nella mia app Ember ho una barra di navigazione con gruppi. Ogni pezzo unico appare due volte nel bar: nel proprio gruppo e in "All Items" gruppo:

Se l'utente seleziona Articolo 3 entrambi i collegamenti diventano attive ottenendo classe active CSS:

Come posso modificare il mio codice in modo che il collegamento su cui l'utente ha fatto clic sia attivo? Se l'utente apre/item/3 URL manualmente, dovrebbe essere attivo solo il primo link.

Ecco il mio codice finora: 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; 
    } 
}); 

navigazione modello bar:

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

Ember versione: 2.4.2

Answer 1

Aggiungi group parametro di query al percorso voce:

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

Successivamente, aggiungere group parametro di query per ogni collegamento:

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

Questo rende solo un collegamento attivo. Lo svantaggio è un parametro di stringa di query aggiuntivo in tutti gli URL di elementi, ad es. /item/5?group=all.

Demo: http://jsbin.com/josogumaqo/edit?html,js,output

Answer 2

In primo luogo, voglio dire che è una domanda molto interessante, grazie.

Si può fare come @ pavel-chuchuva suggerito, o (per evitare i parametri aggiuntivi e rendere gli URL di facile utilizzo) creano un percorso separato per ogni gruppo:

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' }); 
}); 

Si può creare una miscela per evitare di avere a 3 copie dello stesso codice

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

e estendono, aeb percorsi da quella mixin:

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

Esempio di lavoro: http://jsbin.com/nibacogeye/edit?html,js,output