css - emberjsルータークラスがアクティブ

Question

私はこれの例を見つけることができることを知っていますが、エラーなしでコードに入れることはできません...理由がわかりません。

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();

});