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:

<ul class="nav">
<li {{bindAttr class="atIndex:active"}}>{{#linkTo "index"}}Index{{/linkTo}}</li>
<li {{bindAttr class="atAbout:active"}}>{{#linkTo "about"}}About{{/linkTo}}</li>
<li {{bindAttr class="atLogin:active"}}>{{#linkTo "login"}}Login{{/linkTo}}</li>
</ul>

atIndex, atAbout and atLogin reside in my ApplicationController.

To render as:

<ul class="nav">
<li class="active"><a...>Index{{/linkTo}}</li>
<li><a...>About<a></li>
<li><a...>Login<a></li>
</ul>

What's the best way to do this with Ember 1.0 pre4? I'd rather not add special code to every view or controller.

PS - atIndex: true works, but atIndex: function() {return true; }.property().volatile() does not. Which makes me think I'm doing something wrong.

Thank you!

Answer 1

{{#link-to "dashboard" tagName="li" href=false}}
  <a {{bind-attr href="view.href"}}>
    Dashboard
  </a>
{{/link-to}}

Answer 2

By far the cleanest way to solve this is by taking advantage of the linkTo helper's built-in support for setting the active class when rendering links. AFAIK this is not yet documented other than in the source code:

implementation: https://github.com/emberjs/ember.js/blob/master/packages/ember-routing/lib/helpers/link_to.js#L46

example: https://github.com/emberjs/ember.js/blob/master/packages/ember/tests/helpers/link_to_test.js#L120

To take advantage of this feature just adjust your css to style based on having an active class on the link instead of the li element. If you really need to style the li you can create a custom view and helper that extends Ember.LinkView and uses an li but changing css will be far easier.

--- UPDATE ----

Since we all love twitter bootstrap just changing the css is perhaps not such a great option. In that case, the following will do the trick:

App.ApplicationView = Ember.View.extend({
  currentPathDidChange: function() {
    Ember.run.next( this, function() {
      this.$("ul.nav li:has(>a.active)").addClass('active');
      this.$("ul.nav li:not(:has(>a.active))").removeClass('active');
    });
  }.observes('controller.currentPath')
});

Working example using ember linkTo helper with bootstrap pills: http://jsbin.com/ekobod/5/edit (requires ember-1.0.0-pre.4)

Answer 3

the active route's path is updated automatically in the ApplicationController via currentPath so I did something like that in my App... In ApplicationController added properties like so:

isProductsActive: function(){
  if ( this.get('currentPath') === 'products' ) return 'active';
  else return '';
}.property('currentPath')

and in my ApplicationView template:

<li {{bindAttr class="isProductsActive"}}>
  {{#linkTo "products"}}Products{{/linkTo}}
</li>

Answer 4

I made an ember-cli addon that handles this:

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

Answer 5

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.

Answer 6

If I may suggest another solution that requires nothing but Handlebars:

<li {{bind-attr class="view.innerLink.active:active"}}>
    {{#link-to "path" viewName="innerLink"}}Click{{/link-to}}
</li>

This sets the LinkView object as a member of the parent view, which's active attribute you can then reference.

Answer 7

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 8

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 9

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 10

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 11

I solved a similar problem by creating a view for each item and using classNameBindings (I have to say that i don't have a HTML list, i.e.<a>...</a> in my app, just list of <div>).

Here is the way it works for me:

In tasklist.handlebars i iterate over my custom view

  {{#each tasks}}
    {{view App.TaskListItemView contentBinding="this"....}}
  {{/each}}

Ember will insert a view (i. e. <div>) for each item.

The view class for each item is defined in task_list_item_view.js as

App.TaskListItemView = Ember.View.extend({

  controller: null,
  classNameBindings: ['isSelected', 'isClosed'],

  isClosed: function() {
      var content = this.get('content');
      return content && !content.isOpen(new Date);
  }.property('controller.content.@each'),

  isSelected: function() {
      return (this.get('controller').isSelectedTask(this.get('content')));
  }.property('controller.taskSelection.@each'),

  ....
});

Finally the template for the view just renders my link in tasklistitem.handlebars

<a {{action "selectTask" view.content target="view"}} rel="tooltip"
         {{bindAttr title="view.content.comment"}} class="taskListLink">
  ....
</a>

AFAIK you have to specify the source data in the property() call to let ember know when to (re-) evaluate the property.

Hope that helps

Answer 12

I went with:

 Ember.LinkView.reopen({
didInsertElement:function(){

    if(this.$().hasClass('active')){

        this.$().parent().addClass('active');

    }
}

});

I didn't want to use the accepted answer as I wanted to keep my li elements as plain old html. There might be a better way to check the active state but I couldn't get access to the right property.