emberjs路由器类活跃

Question

我知道我可以找到这方面的例子，但是我无法将它放入我的代码中而没有错误...只是不知道为什么。

我想先从菜单中的set class =“menu-active”开始。

<li><a {{action gotoAbout}} >About</a></li>

稍后当有人点击菜单的其他位置时移动class =“menu-active”到这个位置。

http://jsfiddle.net/kwladyka/LGArM/3/

奖金问题：你有什么言论可以让我的代码更好吗？

HTML
    <script type="text/x-handlebars" data-template-name="application">
{{view App.NavbarView}}
{{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="navbar">
    <div id="menu" class="grid_12">
        <ul>
            <li><a {{bindAttr class="isAbout:active"}} {{action gotoAbout}} >About</a></li>
            <li><a {{bindAttr class="isProjects:active"}} {{action gotoProjects}} >Projekty</a></li>
            <li><a {{action gotoTechnology}} >Technologie</a></li>
            <li><a {{action gotoContact}} >Kontakt</a></li>
        </ul>
    </div>
</script>

EMBERJS

$(function() {

console.log("### emberjs start ###");

App = Em.Application.create({
    rootElement: '#emberjs-container'
});

App.ApplicationController = Em.Controller.extend();
App.ApplicationView = Em.View.extend({
    templateName: 'application'
});

App.NavbarController = Em.Controller.extend({

});
App.NavbarView = Em.View.extend({
    templateName: 'navbar',
});


App.AboutView = Em.View.extend({
    templateName: 'about'
});

App.ProjectsView = Em.View.extend({
    templateName: 'projects'
});

App.TechnologyView = Em.View.extend({
    templateName: 'technology'
});

App.ContactView = Em.View.extend({
    templateName: 'contact'
});


App.Router = Em.Router.extend({
    enableLogging: true,
    location: 'hash',

    root: Em.Route.extend({
        // EVENTS
        gotoAbout: Ember.Route.transitionTo('about'),
        gotoProjects: Ember.Route.transitionTo('projects'),
        gotoTechnology: Ember.Route.transitionTo('technology'),
        gotoContact: Ember.Route.transitionTo('contact'),

        // STATES
        about: Em.Route.extend({
            route: '/',
            connectOutlets: function (router, context) {
                router.get('applicationController').connectOutlet('about');
            }
        }),

        projects: Em.Route.extend({
            route: '/projects',
            connectOutlets: function (router, context) {
                router.get('applicationController').connectOutlet('projects');
            }
        }),

        technology: Em.Route.extend({
            route: '/technology',
            connectOutlets: function (router, context) {
                router.get('applicationController').connectOutlet('technology');
            }
        }),

        contact: Em.Route.extend({
            route: '/contact',
            connectOutlets: function (router, context) {
                router.get('applicationController').connectOutlet('contact');
            }
        })
    })
});

App.initialize();

});