How to set the "active" link for several different routes in EmberJS

Question

I would like to set the “active” class to an Ember-helper link for multiple routes where routes are not nested. i.e. if I have a link to route1, I would like it to be active when the current route is route1 or route2.

Sort of:

{{#link-to 'route1' currentWhen="route1, route2"}}Things-N-Stuff{{/link-to}}

My next ideal script sets (or finds) a boolean when the route is active, and then does something like:

 {{#link-to 'route1' class="isRoute1:active isRoute2:active"}}Not-as-good{{/link-to}} 

But I'd rather take it for free. Perhaps the default isRoutename boolean, which is not already in the docs ...?

---

There are no answers. I ended up with this:

 {{#linkTo "things" tagName="li" href=false}} <a {{bindAttr href="view.href"}} {{bindAttr class="isThingsLinkActive:active"}}>Things</a> {{/linkTo}} 

And then in the App.ApplicaitonController

 isThingsLinkActive: function(){ return ['things.index','thing.index','stuff.index'].contains( this.get('currentPath') ); }.property('currentPath'), 

This means that I need to have something like thins in my application controller for every overloaded link. Wouldn't it be cleaner to capture this completely in the template using the default flags / attributes created by ember? I am open to a more elegant solution ... anyone?

Answer 1

According to the link to # active documentation , you can do this using the space "currentWhen", but this requires Ember 1.8.

 {{#link-to 'route1' currentWhen="route1 route2"}}Things-N-Stuff{{/link-to}} 

It can also be a function that you can enable in previous builds:

See 'ember-routing-multi-current-when' on https://github.com/emberjs/ember.js/blob/master/FEATURES.md

Alternatively, you can override the helper link with one of the methods described in this SO post:

Is there a way to pass the currentWhen array to EmberJS?