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="child" >
    child
</script>
<script type="text/x-handlebars" data-template-name="parent" >
    parent
</script>
before
<div id="foo"></div>
after

JavaScript

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

Ember.LOG_STATE_TRANSITIONS = true;

App.stateManager = Ember.StateManager.create({
    rootElement: '#foo',

    start: Ember.ViewState.create({
        view: Ember.View.create({
                templateName: 'parent'
            }),
        enter: function(m) {
          console.log('entered');
          m.goToState('child');
        },
        child: Ember.ViewState.create({
            view: Ember.View.create({
                templateName: 'child'
            })
        })
    }),
    other: Ember.State.create({})
});