Assigning 'active' class to selected list item in EmberJS

问题:

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

{{#linkTo "index"}}Index{{/linkTo}}
 
{{#linkTo "about"}}About{{/linkTo}}
 
{{#linkTo "login"}}Login{{/linkTo}}
 

atIndex, atAbout and atLogin reside in my ApplicationController.

To render as:

Index{{/linkTo}}
 
About
 
Login
 

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!

回答1:

{{#link-to "dashboard" tagName="li" href=false}}        Dashboard    {{/link-to}} 

回答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)

回答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:

   {{#linkTo "products"}}Products{{/linkTo}} 
 

回答4:

I made an ember-cli addon that handles this:

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

回答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"}}    Dives {{/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 :

{{#linkTo "index" activeClass="active"}}Index{{/linkTo}}
 
{{#linkTo "about" activeClass="active}}About{{/linkTo}}
 
{{#linkTo "login" activeClass="active}}Login{{/linkTo}}
 

Enber will automatically add the class when relevant.

回答6:

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

     {{#link-to "path" viewName="innerLink"}}Click{{/link-to}} 
 

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

回答7:

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

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

Works with Bootstrap v3.1.1 and Ember v1.7.0

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

回答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

回答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|}}   Index Page {{/link-to}} 

回答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.... in my app, just list of

).

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.

) 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

   ....  

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

回答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.

文章来源: Assigning 'active' class to selected list item in EmberJS