Ember.js states

by jeffutter

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.js"></script>
<script type="text/x-handlebars" data-template-name="loggedOut" >
    loggedOut
</script>
<script type="text/x-handlebars" data-template-name="inSub" >
    inSub
</script>
<script type="text/x-handlebars" data-template-name="loggedIn" >
    loggedIn
</script>
before
<div id="foo"></div>
after

JavaScript

App = Ember.Application.create({});

var __bind = function (fn, me) {
        return function () {
            return fn.apply(me, arguments);
        };
    };
Ember.LOG_STATE_TRANSITIONS = true;

App.statechart = Ember.StateManager.create({
    rootElement: '#foo',
    initialState: 'loading',

    loading: Ember.State.create({
        enter: function (manager) {
            manager.goToState('loggedOut')
        }
    }),

    loggedOut: Ember.ViewState.create({
        view: Ember.View.create({
            templateName: 'loggedOut'
        }),
        enter: function (manager) {
            // manager.send('doLogin');
            manager.goToState('loggingIn');
        },
    }),
    
    doLogin: function (manager) {
        manager.goToState('loggingIn');
    },

    loggingIn: Ember.State.create({
        enter: function (manager) {
            manager.goToState('loggedIn');
        },
    }),

    loggedIn: Ember.ViewState.create({
        view: Ember.View.create({
            templateName: 'loggedIn'
        }),
        enter: function (manager) {
            manager.goToState('in');
        },
        exit: function () {},

        in : Ember.State.create({
            enter: function (manager) {
                manager.goToState('inSub');
            },
            exit: function () {},

            inSub: Ember.ViewState.create({
                view: Ember.View.create({
                    templateName: 'inSub'
                }),
                enter: function () {},
                exit: function () {},
            })
        })
    })
});