Ember - make active tab

by fangyang

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0.beta6/handlebars.min.js"></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="https://github.com/downloads/pangratz/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{outlet "navigation"}}
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="navigation">
    <ul class="nav nav-tabs">
        {{#view view.NavItemView item="home" }}
            <a {{action gotoHome}} >Home</a>
        {{/view}}
        {{#view view.NavItemView item="profiles" }}
            <a {{action gotoProfiles}} >Profiles</a>
        {{/view}}
        {{#view view.NavItemView item="messages" }}
            <a {{action gotoMessages}} >Messages</a>
        {{/view}}        
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="home">My home is my castle</script>
<script type="text/x-handlebars" data-template-name="profiles">Profilezzz</script>
<script type="text/x-handlebars" data-template-name="messages">No new messages</script>

CSS

a {
    cursor: pointer;
}

JavaScript

$(function() {
    App = Em.Application.create();

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

    App.HomeController = Em.Controller.extend();
    App.HomeView = Em.View.extend({
        templateName: 'home'
    });

    App.ProfilesController = Em.Controller.extend();
    App.ProfilesView = Em.View.extend({
        templateName: 'profiles'
    });


    App.MessagesController = Em.Controller.extend();
    App.MessagesView = Em.View.extend({
        templateName: 'messages'
    });


    App.NavigationController = Em.Controller.extend();
    App.NavigationView = Em.View.extend({
        templateName: 'navigation',
        selectedBinding: 'controller.selected',
        NavItemView: Ember.View.extend({
            tagName: 'li',
            classNameBindings: 'isActive:active'.w(),
            isActive: function() {
                return this.get('item') === this.get('parentView.selected');
            }.property('item', 'parentView.selected').cacheable()
        })
    });

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

        root: Em.Route.extend({
            // EVENTS
            gotoHome: Ember.Route.transitionTo('home'),
            gotoProfiles: Ember.Route.transitionTo('profiles'),
            gotoMessages: Ember.Route.transitionTo('messages'),

            index: Em.Route.extend({
                route: '/',
                connectOutlets: function(router) {
                    router.get('applicationController').connectOutlet('navigation', 'navigation');
                },
                // STATES
                home: Em.Route.extend({
                    route: '/',
                    connectOutlets: function(router) {
                        router.set('navigationController.selected', 'home');
                        router.get('applicationController').connectOutlet('home');
                    }
      ...