How to set link 'active' for multiple different routes in EmberJS

Question

I'd like to set the 'active' class on an Ember link-to helper for more than one route, where the routes are not nested. ie. if I have a link to route1 I would like it to be active when the current route is route1 or route2.

Something, like:

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

My next ideal scenario is set (or find) a boolean when the route is active and then do something like:

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

But I'd rather pick it up for free. Perhaps there is a default isRoutename boolean that isn't in the docs yet...?

No answers yet. I ended up doing 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'),

It means I need to have something like thins in my app controller for each 'overloaded' link. Wouldn't it be cleaner to capture this entirely in the template using default flags/attributes generated by ember? I'm open to a more elegant solution... anyone?

possible duplicate of [EmberJS Set Multiple Properties At Once](http://stackoverflow.com/questions/8752805/emberjs-set-multiple-properties-at-once) — Paul Sweatte, Apr 16 '14 at 19:35
@PaulSweatte I don't think these are related at all. This question has to do with the link-to helper. The other one is about setting properties. If I'm wrong and you can figure out how to use setProperties to accomplish the goal I'd love to see it in a jsfiddle or something. — genkilabs, Apr 18 '14 at 17:30

score 11 · Answer 1 · edited May 23 '17 at 11:45

11

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

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

This may also be a feature you can enable on earlier builds:

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

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

Is there a way to pass an array to currentWhen in EmberJS?

edited May 23 '17 at 11:45

Community

1
1

answered Dec 02 '14 at 14:56

Ryan Rapp

1,583
13
18

Thanks for responding to this year-old thread. Sometimes these features take a while, but I'm glad to see this was thought through and is (will be) supported. – genkilabs Dec 03 '14 at 16:10
Ahh, didn't actually notice the date, but it's still a relevant question today and I'm glad you asked it ;) good that it's been addressed by the Ember folks – Ryan Rapp Dec 03 '14 at 23:42

score 2 · Accepted Answer · answered Jun 05 '18 at 01:49

2

Currently as of 3.2 the correct syntax is:

{{#link-to 'fruits.index' current-when="fruits.index apples.index"}}Link text{{/link-to}}

Sorry, tried to edit the original answer but the change is less than 6 characters.

answered Jun 05 '18 at 01:49

Chris

3,437
6
40
73

Thanks for keeping this updated. I changed the accepted answer. – genkilabs Jun 06 '18 at 14:42

How to set link 'active' for multiple different routes in EmberJS

2 Answers2