Ember.js states

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.3.js"></script>
<script type="text/x-handlebars" data-template-name="myView" >
    Hello World
</script>
<script type="text/x-handlebars" data-template-name="myNextView" >
    Goodbye World
</script>
before
<div id="foo"></div>
after

JavaScript

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

App.stateManager = Ember.StateManager.create({
    
    rootElement: "#foo",
    
    start: Ember.ViewState.create({
        view: Ember.View.create({
            templateName: 'myView'
        })
    }),
    
    nextState: Ember.ViewState.create({
        view: Ember.View.create({
            templateName: 'myNextView'
        })
    })
    
});

setTimeout(function(){
    App.stateManager.goToState('nextState');
},3000);