Linkto and conditional Icon image

Questions
1

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}}"
</Linkto>

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!

2

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">
</LinkTo>

.my-link {
  background-image: url('./icon-inactive.png');
}
.my-link.my-link-active {
  background-image: url('./icon-active.png');
}
3

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

4

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.

5

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

6

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