ember: bound attributes are evaluated on the wrong tag

Question

I want to highlight a selected navigation element and so I have bound an attribute to the li of a navigation bar like this:

<li {{bindAttr class="isHome:active"}}>{{#linkTo 'home'}}Home{{/linkTo}}</li>

The attribute is evaluated correctly and adds the right class - but not to the li, instead it gets added to the a which results in:

<li class="" data-bindattr-1="1"><a id="ember237" class="ember-view active" href="#/home">Home</a></li> 

Is there something wrong here with the markup or is this a bug?!

Answer 1

There are two things happening here:

1. The isHome property is not getting applied to your li
2. The {{linkTo}} helper, coincidentally, adds an active class to links when the route it points to is active.

This is making you think that the active class is getting moved. You can try logging the isHome property (via {{log isHome}} ) to see whether it is true as you expect.