2016-02-12 25 views
6

Ho due percorsi che sono nidificati in questo modo.Come aggiungere la classe attiva solo per i percorsi esatti e non i percorsi principali in ember js?

router.js

this.route('profile', function() { 
    this.route('edit'); 
}); 

e paio di link navbar per questi percorsi come questo ..

navbar.hbs

{{#link-to 'profile' tagName="li"}}<a href>View Profile</a>{{/link-to}} 
{{#link-to 'profile.edit' tagName="li"}}<a href>Edit Profile</a>{{/link-to}} 

Il link-to aiutante aggiunge active classe al tag li qui. Quindi, quando sono nella route profile, il primo collegamento ha la classe active e quando sono nel percorso profile.edit, entrambi i collegamenti hanno classe active. (apparentemente perché entrambi i percorsi vengono attivati ​​quando viene visitato lo)

Come evitare il collegamento del percorso principale per ottenere la classe active quando si trova in un percorso secondario?

Fondamentalmente non desidero che il primo collegamento (a profile) abbia la classe active quando si trova nella route profile.edit.

+0

È possibile utilizzare 'current-when', anche se penso che maschererà il fatto che i percorsi probabilmente non dovrebbero essere nidificati in quel caso. – locks

risposta

12

Ho capito se qualcun altro ha di fronte lo stesso problema.

Ho appena cambiato il collegamento a profile e lo ho fatto esplicitamente a profile.index.

navbar.hbs

{{#link-to 'profile.index' tagName="li"}}<a href>View Profile</a>{{/link-to}} 
{{#link-to 'profile.edit' tagName="li"}}<a href>Edit Profile</a>{{/link-to}} 

In questo modo, quando in profile.edit percorso, il primo link non ottiene la classe active.