Linkto and conditional Icon image

hey I am new to Ember, I am trying to make a Linkto button which changes an image (an icon from active to non active). i have 4 of these icons each one with an active and non active, so I cant use “@activeClass” on the Linkto.

what I really want is to do something like this:

<Linkto @route="etc">
<img src = "{{if "SOMETHING" img1 img2}}"

i couldnt figure out what that SOMETHING is. i dont understand how to access the Linkto’s “active” property. i also tried wrapping both of them inside another componenet, but then I couldnt figure out how to buble the active state to the component. and putting an {{on click}} on the linkto didnt trigger an action on the wrapping componenet…

any advice? thanks!

Can you use CSS to control your image? Because then it can all be done with CSS selectors and @activeClass:

<LinkTo @route="etc" class="my-link" @activeClass="my-link-active">
.my-link {
  background-image: url('./icon-inactive.png');
} {
  background-image: url('./icon-active.png');

no because there will be many of these IconLinks. that would be a lot of classes.

Sorry, I see now you mentioned that in the question.

In that case, I think you should check out the router-helpers addon. It implements an RFC that is already approved but not implemented yet within Ember itself.

Ok great I’ll check it out , thanks. I’m also trying to somehow implement this with “tabs”

I wrote a blog post about alternatives to LinkTo, specifically as related to setting link activeness, so you might find it useful: