Propagating 'active' of linkTo to enclosing <li>

[sanfords]

The Bootstrap JS/CSS uses the existence of an 'active' class to determine if an item in a UI element should be highlighted. linkTo in ember can only add the 'active' class to the anchor it creates.

A few solutions have been proposed for this, most notably this stack overflow solution. Unfortunately, this solution breaks with {{#linkTo "index"}}... as in this jsbin based upon the original.

Within the IRC chat it was mentioned that some sort of {{activeWhen}} tag could be added to ember.

Anything that could be done to help with this issue would be most welcome. :-)

Thank you!

[nragaz]

@sanfords FYI, using {{#linkTo index tagName="li"}}<a {{bindAttr href="view.href"}}>Index</a>{{/linkTo}} still works, although the output is invalid HTML.

[sanfords]

That's a really neat idea. Thank you.

[jamesarosen]

You might also consider doing away with the <ol> and the <li>s altogether. You can style the <a>s as blocks, or even as list elements. Unless you're building something like Delicious and actually have lists of links, the <li>s might not be semantically correct anyway. I personally like <nav><a href="/about">About</a>...</nav> for main menus.

[sanfords]

You are correct. However I'm using the comprehensive Bootstrap library to build up my UI. And it uses class="active" in the

block.

[sanfords]

More discussion here: #1849

[sanfords]

I'm going to close this so we can move the discussion to 1849.