Assigning 'active' class to selected list item in EmberJS

Question

I have a list and I\'d like to set one item as class=\"active\" automatically. Given the following bootstrap code:

Answer 1

A lot of these answers are outdated. Here is a much cleaner (and DRY) version for Bootstrap and Ember 2.x:

{{#link-to "index" tagName="li" as |link|}}
  <a href="#" class="{{if link.active 'active'}}">Index Page</a>
{{/link-to}}

Answer 2

I made an ember-cli addon that handles this:

https://github.com/alexspeller/ember-cli-active-link-wrapper

Answer 3

I found a pretty simple Solution using linked items in a list group(http://getbootstrap.com/components/#list-group-linked).

<div class="list-group">
{{#each thing in list}}
    {{#link-to "details" thing.id tagName="a" href="view.href" class="list-group-item" {{thing.name}} {{/link-to}}
{{/each}}
</div>

Works with Bootstrap v3.1.1 and Ember v1.7.0

Answer 4

Just nest the {{link-to}} with a tagName on the outer one. I'm doing this on EmberJS 2.0.

{{#link-to "admin.websocket" tagName="li"}}
    {{#link-to "admin.websocket"}}WebSocket{{/link-to}}
{{/link-to}}

Answer 5

If you want to use Bootstrap navigation in Ember then you can use Bootstrap for Ember that has out of the box support for this:

Github: https://github.com/ember-addons/bootstrap-for-ember Demo: http://ember-addons.github.io/bootstrap-for-ember/dist/#/show_components/tabs

Answer 6

EDIT: Finally, the best way I've found to use the activate class of bootstrap li element using ember.js of the link.

{{#linkTo "dives" tagName="li"}}
   <a {{bindAttr href="view.href"}}>Dives</a>
{{/linkTo}}

--------------8<--------------

DEPRECATED:

I guess the previous answers were relevant before Ember.js introduced the activeClass attribute for linkTo helper. Now I would solve the problem like this :

<ul class="nav">
<li >{{#linkTo "index" activeClass="active"}}Index{{/linkTo}}</li>
<li >{{#linkTo "about" activeClass="active}}About{{/linkTo}}</li>
<li >{{#linkTo "login" activeClass="active}}Login{{/linkTo}}</li>
</ul>

Enber will automatically add the class when relevant.