Ember Latest

The latest build of Ember.

by darthdeus

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>ohai</h1>
    {{outlet}}
</script>


<script type="text/x-handlebars" data-template-name="new">
    {{sm.currentState.name}}<br>
    {{outlet steps}}
</script>

<script type="text/x-handlebars" data-template-name="basic_info">
    fill in your basic info
    <button {{action next sm}}>next</button>
</script>

<script type="text/x-handlebars" data-template-name="activation">
    activate your account
    <button {{action prev sm}}>prev</button>
    <button {{action finish}}>finish</button>
</script>

<script type="text/x-handlebars" data-template-name="empty">
</script>

CSS

ul { padding: 15px; font-size: 1.4em; color: green; }

JavaScript

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

App.Router.map(function() {   
    this.resource("new", { path: "/" });
});

App.User = Ember.Object.extend();

App.UserManager = Ember.StateManager.extend({
    initialState: "basicInfo",
    basicInfo: Ember.State.extend({
        next: function(manager) {
            manager.transitionTo("activation");
        }
    }),
    activation: Ember.State.extend({
        prev: function(manager) {
            manager.transitionTo("basicInfo");
        }
    })
});

App.NewRoute = Ember.Route.extend({
    model: function() {
        return App.User.create();
    },
    
    events: {
        next: function(sm) {
            sm.send("next");
            this.render(sm.get("currentState.name"), { into: "new", outlet: "steps" });
        },
        
        prev: function(sm) {
            sm.send("prev");
            this.render(sm.get("currentState.name"), { into: "new", outlet: "steps" });
        },
        
        finish: function() {
            alert("GOOD JOB BRO");
        }
    },
    
    setupController: function(controller) {
         controller.set("sm", App.UserManager.create());   
    },
    
    renderTemplate: function() {
        this.render();
        this.render('basicInfo', { into: "new", outlet: 'steps' });
    }
});