highlight current item in navbar using ember.js

问题

I am trying to highlight the current item in my navigation bar. This is my router:

App.Router = Em.Router.extend({
    enableLogging: true,
    location: 'hash',
    root: Em.Route.extend({
        // EVENTS
        gotoList: Ember.Route.transitionTo('list'),
        gotoAbout: Ember.Route.transitionTo('about'),
        // STATES
        list: Em.Route.extend({
            route: '/list',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet('list');
            },
            enter: function(router) {
                $('.active').removeClass('active');
                $('.nav-pills li.list').addClass('active');
            }
        }),
        about: Em.Route.extend({
            route: '/about',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet('about');
            },
            enter: function(router) {
                $('.active').removeClass('active');
                $('.nav-pills li.about').addClass('active');
            }
        })
    })
});

This is not working.
Maybe I am using an incorrect function ("enter")?
How can I prevent the "enter" function duplication of list and about states?

来源：https://stackoverflow.com/questions/11768384/highlight-current-item-in-navbar-using-ember-js