javascript - Add "active" class to bootstrap dropdown menu when dropdown link selected (with Ember link-to) -

javascript - Add "active" class to bootstrap dropdown menu when dropdown link selected (with Ember link-to) -

i'm using twitter bootstrap , have navbar regular link , dropdown link. using ember's link-to helper, regular link automatically gets "active" class when clicked, menu items in dropdown menu. however, cannot life of me figure out best way parent li tag "active" class when 1 of dropdown menu items selected. i've tried creating component out of dropdown menu cannot work.

markup in .emblem:

.navbar.navbar-default.navbar-static-top ul.nav.navbar-nav //---------// // business relationship // //---------// link-to 'admin.business.index' tagname="li" href=false href="#" business relationship //----------// // branding // //----------// li.dropdown a.dropdown-toggle data-toggle="dropdown" href="#" ' branding span.caret ul.dropdown-menu role="menu" link-to 'admin.business.design' tagname='li' href=false href="#" design link-to 'admin.business.email' tagname='li' href=false href="#" email templates link-to 'admin.business.url' tagname='li' href=false href="#" vanity url

i thought maybe nest link-tos replacing "branding" wrapper

li.dropdown

with

link-to 'admin.business.design' tagname='li' href=false class="dropdown"

but makes entire dropdown element link "admin.business.design".

i've created bin here: http://emberjs.jsbin.com/cosute/2/edit?html,output.

you can see "account" , "thing" active when route is, , submenu items under "branding" well, need "branding" selected when dropdown item under well.

jsbin

this solution used. instead of making {{link-to}} li, create component li. component makes utilize of work ember in setting active class link-to current route:

app.navitemcomponent = ember.component.extend({ tagname: 'li', classnamebindings: ['active'], active: function(){ homecoming this.get('childviews').isany('active'); }.property('childviews.@each.active') });

this works because observing of link-to active properties set ember parameter passed property(). active property recomputed link-to helpers each time route changes.

javascript twitter-bootstrap ember.js