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!

score 75 · Accepted Answer · edited Dec 12 '14 at 22:31

75

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

edited Dec 12 '14 at 22:31

Seth McClaine

9,142
6
38
64

answered Jan 24 '13 at 12:07

lesyk

3,979
3
25
39

3

Yes, if you add href=false to the linkto, this will actually generate valid HTML. :-) – shs Jan 24 '13 at 15:29
In HTML 4.01, the tag could be either a hyperlink or an anchor. In HTML5, the tag is always a hyperlink, but if it has no href attribute, it is only a placeholder for a hyperlink. @shs you can write without href and html will be valid. – lesyk Feb 06 '13 at 16:04
It doesn't work anymore, as linkTo doesn't change the view context anymore. – Bastes Feb 26 '13 at 19:06
With Ember version v1.0.0-rc.1-13-gd3f0c73 it still works - just confirmed it on one of our projects. – Florian Mar 09 '13 at 21:52
Even though this is a pretty fine solution, it seems like it prevents navigation items to work on Mobile Safari - just did a quick test on an iPad2 (iOS 6.0) and an iPhone5 (6.0.1). – Florian Mar 09 '13 at 22:45
11

Here is a workaround: just repeat the link inside, you'll have the active class on li and the href in the anchor this way : {{#linkTo "dashboard" tagName="li" href=false}}{{#linkTo "dashboard"}}Dashboard{{/linkTo}}{{/linkTo}} I guess the best thing to do is write your own view, but in my case it's a purely static part, not worth it. – vincent Mar 28 '13 at 18:55
1

Nesting linkTo causes problems with the number of events fired when clicking on the link. See a solution: http://dmathieu.com/articles/development/emberjs-twitter-bootstrap-active-li/ – Damien MATHIEU Aug 07 '13 at 16:08
6

For newer versions of Ember, be sure to use `link-to` instead of `linkTo`. – bosgood Nov 16 '13 at 21:37
4

Where does that `view` variable come from? – jakecraige Dec 08 '13 at 22:47
I couldn't get this to work with the latest build of ember and ended up going with what joelmoss suggests here: https://github.com/emberjs/ember.js/pull/1849 – John Siladie Jan 06 '14 at 00:17
1

Adapted for Ember `1.3.1` (and possibly fresher versions): `{{#link-to "dashboard" tagName="li" href=false}}Dashboard{{/link-to}}` – Abdull Feb 25 '14 at 16:37
2

Where is the documentation that there exists a bind-attr `view.href`? I can’t seem to find it. – Profpatsch Jul 22 '14 at 14:09
Worked for me, not sure I understand the solution entirely but it did indeed work with latest version of ember-cli. – Joshua F. Rountree Feb 17 '15 at 18:23
Current versions of Ember do not require the `href=false` parameter. The attribute will not be added if the tag to be generated is not 'a'. Tested with Ember 1.10.0 [Source](https://github.com/emberjs/ember.js/blob/master/packages/ember/tests/helpers/link_to_test.js#L143) – pfac Mar 14 '15 at 00:51
2

This works and it makes absolutely no sense to me. The `active` class is added appropriately, but I don't know why... Using ember 1.11.1 – carter Apr 25 '15 at 22:48
Using Ember 2.11.0 here. It seems that bind-attr was removed. Using works great! Thanks! – Luis Aguirre Mar 10 '17 at 17:12

Mike Grassotti · Answer 2 · 2013-01-23T03:19:47.080

14

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)

edited Jan 23 '13 at 03:19

answered Jan 19 '13 at 16:57

Mike Grassotti

19,040
3
59
57

Unfortunately for this problem I'm using the popular javascript-bootstrap controls in my project. (Fortunately, though, because they're really great. :-) It would be neat if the linkTo could somehow push a value into the controller automatically that in turn would bind to the
's active class.

shs

Jan 19 '13 at 17:49

The closest I've found is this solution: http://stackoverflow.com/questions/14328295/how-do-i-bind-to-the-active-class-of-a-link-using-the-new-ember-router – shs Jan 20 '13 at 00:18

1

There is a new pull-request with solution for wrapping linkTo tag in an li, might want to have a look and comment https://github.com/emberjs/ember.js/pull/1849 – Mike Grassotti Jan 23 '13 at 03:24

Neat stuff there. I filed [this one](https://github.com/emberjs/ember.js/issues/1822) but it wasn't as popular. Thanks! – shs Jan 23 '13 at 14:57

2

This function `currentPathDidChange` is only run when the path-depth is changing. Not when the same level is changing: from `/pages/1` to `/pages/2` – Willem de Wit Feb 15 '13 at 15:54

Thanks Mike, your solution works Ok with nested navs with which I hade problems using Yehuda's solution from the link above – Qrilka Mar 14 '13 at 07:41

`this.$("ul.nav li:has(>a.active)").addClass('active'); this.$("ul.nav li:not(:has(>a.active))").removeClass('active');` is changing the class of the tag. How can I get it to change the class of the

tag to work with bootstrap?

– Dan Baker May 10 '13 at 20:22

score 5 · Answer 3 · answered Jan 19 '13 at 16:22

5

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>

answered Jan 19 '13 at 16:22

colymba

2,644
15
15

This is a good idea. But I'll be adding lots of
items and I'm looking for a more general purpose solution that I can apply to all of them without special casing each and every link.

shs

Jan 19 '13 at 17:52

score 5 · Answer 4 · answered Mar 18 '15 at 20:37

5

I made an ember-cli addon that handles this:

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

answered Mar 18 '15 at 20:37

alexspeller

788
7
9

This solution was the best for me. Many of the nested link-to suggestions didn't either didn't show the link address anymore, or showed a regular cursor instead of a pointer. – Dennis Nov 22 '16 at 22:03

Cyril · Answer 5 · 2014-07-29T13:10:29.590

3

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.

edited Jul 29 '14 at 13:10

answered Sep 28 '13 at 03:36

Cyril

741
1
6
16

no, the question is about adding the active class to the _list item_, not the link. – sevenseacat Sep 28 '13 at 10:09
yes I know, but it makes more sense using the already builtin helper in the _link_ rather than building complex logical to have the effect in the _list item_... except if OP wants to modify specific _list item_ DOM attribute. – Cyril Sep 29 '13 at 01:14
@user11012 Thanks for your response - even though it might be not exactly answering the asked question, it is quite useful to know about it - I didn't and you saved me some time :) – Damian Walczak Nov 20 '13 at 14:53
1

@user11012, it doesn't make more sense when you're using a front-end framework like Bootstrap, which uses the "active" class on the li item, rather than the link itself. – aleayr Feb 08 '14 at 12:55
Okay, here is the way to use the bootstrap feature with ember.js I've found : `code {{#linkTo "dives" tagName="li"}} Dives {{/linkTo}}` – Cyril Jul 05 '14 at 08:50

score 2 · Answer 6 · answered Apr 18 '14 at 11:39

2

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.

answered Apr 18 '14 at 11:39

Elte Hupkes

2,773
2
23
18

As opposed to other solutions involving bind-attr and view.href this actually still works with Ember 1.12 and HTMLbars!!! You can use class={{view.innerLink.active}}. – Andrey Taranov May 20 '15 at 14:10

Karda · Answer 7 · 2014-09-16T15:14:27.067

2

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

edited Sep 16 '14 at 15:14

answered Sep 16 '14 at 14:51

Karda

303
2
8

score 2 · Answer 8 · answered Aug 17 '15 at 15:57

2

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}}

answered Aug 17 '15 at 15:57

Chris Carey

41
2

score 1 · Answer 9 · answered Aug 29 '13 at 15:31

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

score 1 · Answer 10 · answered Apr 07 '16 at 12:06

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}}

answered Apr 07 '16 at 12:06

Sukima

9,965
3
46
60

This does not work. Seems `link` is undefined. WTF?! – Sukima Apr 19 '16 at 17:05

score 0 · Answer 11 · answered Jan 19 '13 at 11:39

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

score -1 · Answer 12 · answered Jan 07 '15 at 21:31

-1

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.

answered Jan 07 '15 at 21:31

henryallsuch

169
1
4

This will not work when you navigate around your app – alexspeller Mar 18 '15 at 20:37

Assigning 'active' class to selected list item in EmberJS

12 Answers12

Linked