ember state issue

by Benmonro

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/handlebars-1.0.0-rc.3.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-latest.js"></script>
<script type="text/x-handlebars" id="navbar">

    <div class="navbar">
        <div class="navbar-inner">
            <div class="container">
                <div class="brand">{{#linkTo "index"}}MyApp{{/linkTo}}</div>
                <ul class="nav pull-right">

					{{#if isAuthenticated}}

                        <li><a {{action logout}} href="#">Logout</a></li>
					{{else}}
                        <li><a {{action login}} href="#">Login</a></li>
					{{/if}}
                </ul>

            </div>
        </div>
    </div>
</script>
<script type="text/x-handlebars">

	{{render navbar}}
			{{authState}}
	{{#if isAuthenticated}}
		{{outlet}}
	{{else}}
		{{render login}}
	{{/if}}
</script>

<script type="text/x-handlebars" id="index">
    <div class="container-fluid">
        <div class="offset5 well pull-left span4">
               welcome, now you can do stuff
        </div>
    </div>
</script>
    <script type="text/x-handlebars" id="login">
    <div class="container-fluid">
        <div class="well span6" id="loginModal">

            <div class="modal-body">

                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane active in" id="login">
                        <form class="form-horizontal" action='' method="POST">
                            <fieldset>
                                <div id="legend">
                                    <legend class="">Login</legend>
                                </div>
                                <div class="control-group">
                                    <!-- Username -->
                                   ...

JavaScript

App = Ember.Application.create();
App.LoginController = Em.Controller.extend({

    username:null,

    authStateBinding: Ember.Binding.oneWay('App.LoginStateManager.currentState.name'),
    authState: null,
    isAuthenticated: function () {
        return (this.get('authState') == 'isAuthenticated');
    }.property('authState'),
    login:function(){
//        this.transitionToRoute("forms");

        var credentials = {username:this.get("username"), password:this.get("password")};
        App.LoginStateManager.send("login", credentials);
    }
});


App.ApplicationController = Em.Controller.extend({

    authStateBinding: Ember.Binding.oneWay('App.LoginStateManager.currentState.name'),
    authState: null,

    isAuthenticated: function () {
        return (this.get('authState') == 'isAuthenticated');
    }.property('authState')
});


App.NavbarController = Ember.ArrayController.extend({
    authStateBinding: Ember.Binding.oneWay('App.LoginStateManager.currentState.name'),
    authState: null,
    isAuthenticated: function () {
        return (this.get('authState') == 'isAuthenticated');
    }.property('authState'),
    login: function () {
        var credentials = {}; //todo: get acutal credentials
        console.log("login");
        App.LoginStateManager.send("login", credentials);
    },
    logout: function () {
        App.LoginStateManager.send("logout");
    }
});


App.LoginStateManager = Ember.StateManager.create({
    initialState: "isNotAuthenticated",
    isAuthenticated: Ember.State.create({
        enter: function () {
            console.log("enter " + this.name);
        },
        logout: function (manager, context) {
            //todo: logout
            manager.transitionTo('isNotAuthenticated');
        }
    }),
    isNotAuthenticated: Ember.State.create({
        enter: function () {
            console.log("enter " + this.name);
        },
        login: function (manager, credentials) {
            //todo: login
           ...