Ember Latest

The latest build of Ember.

by iceking1624

HTML

<script src="http://builds.emberjs.com/handlebars-1.0.0.js"></script>
<script src="http://builds.emberjs.com/ember-latest.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-latest.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="session">
    <ul>
        {{#each question in questions itemController="question"}}
        <li class="question">{{question.text}}</li>
            {{#each choice in question.choices itemController="choice"}}
        <li class="choice"> - {{choice.text}}</li>
            {{/each}}
        <li>{{view Ember.TextField valueBinding="newChoice"}}<button type="button"{{action 'addChoice'}}>Add Choice</button></li>
        {{/each}}
        <li class="top-border">{{view Ember.TextField valueBinding="newQuestion"}}<button type="button"{{action 'addQuestion'}}>Add Question</button></li>
    </ul>
</script>

CSS

h1 { font-size: 1.6em; padding-bottom: 10px; }
h2 { font-size: 1.4em; }
.question { font-size: 1.4em; color: green; }
.choice { font-size:1em; color: black; }
input[type="text"] {
 width: 65px;   
}
.top-border {
border-top: 1px solid red;
}
}

JavaScript

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

App.Store = DS.Store.extend({
    adapter: 'DS.FixtureAdapter'
});

App.Session = DS.Model.extend({
    "questions" : DS.hasMany('App.Question') ,
    "firstQuestion" : DS.belongsTo('App.Question')
});
App.Question = DS.Model.extend({
    "session" : DS.belongsTo('App.Session'),
    "choices" : DS.hasMany('App.Choice'),
    "text"    : DS.attr('string')
});
App.Choice = DS.Model.extend({
    "session"  : DS.belongsTo('App.Session'),
    "question" : DS.belongsTo('App.Question'),
    "text"     : DS.attr('string')
});

App.Session.FIXTURES = [{
    "id"           : 999,
    "questions"    : [ 100, 101 ]
}];
App.Question.FIXTURES = [{
    "id"        : 100,
    "session"   : 999,
    "text"      : "What is capital of Louisiana?",
    "choices"   : [ 1, 2, 3 ]
}, {
    "id"        : 101,
    "session"   : 999,
    "text"      : "What is 2+2?",
    "choices"   : [ 4, 5]
}];
App.Choice.FIXTURES = [{
    "id"       : 1,
    "session"  : 999,
    "question" : 100,
    "text"     : "Baton Rouge"
}, {
    "id"       : 2,
    "session"  : 999,
    "question" : 100,
    "text"     : "Bridge City"
}, {
    "id"       : 3,
    "session"  : 999,
    "question" : 100,
    "text"     : "Baker"
}, {
    "id"       : 4,
    "session"  : 999,
    "question" : 101,
    "text"     : "5"
}, {
    "id"       : 5,
    "session"  : 999,
    "question" : 101,
    "text"     : "4"
}];

App.Router.map(function() {
    this.resource('session', { path: ':session_id'});
                  
});

App.IndexRoute = Ember.Route.extend({
    redirect: function() {
        this.transitionTo('session')
    }
});

App.SessionRoute = Ember.Route.extend({
    model: function() {
        return App.Session.find(999)
    }
});

App.SessionController = Ember.ObjectController.extend({
    addQuestion : function() {
        var sessionModel = this.get('model')
        var questionText = this.get('newQuestion')
        
        var question = App.Question.createRecord({
    ...