JSFiddle - React, Tailwind, and code Playground

by durinthomas

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.1.js"></script>
<script src="https://gist.github.com/ThomasDurin/5030150/raw/d517c8bad1a533aafaae9488f558bb23231cea6a/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="student">
    <b>{{fullName}}</b> a une moyenne de <b>{{gradeAverage}}/20</b>.
    <hr>
    <form>
        <label>Prénom:</label><br>
        {{view Ember.TextField valueBinding="firstName"}}<br><br>
        <label>Nom:</label><br>
        {{view Ember.TextField valueBinding="lastName"}}<br><br>
        <label>Notes:</label><br>
        {{#each grades}} {{this}} {{/each}}
    </form>
</script>

JavaScript

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

// Objects Model
App.Person = Ember.Object.extend({
    firstName : null,
    lastName: null,
    fullName: function(){
        firstName = this.get('firstName');
        lastName = this.get('lastName');
        return firstName + " " + lastName;
    }.property('firstName', 'lastName')
});

App.Student = App.Person.extend({
    grades: null,
    gradeAverage: function(){
         var grades = this.get('grades');
         var total = grades.reduce(function(val, i){
             return val + i;
         });
         return (total/grades.get('length')).toFixed(2)
    }.property('grades.@each')
});

// Controller
studentController = Ember.ObjectController.create({
    content: App.Student.create({
        firstName: 'Maxime',
        lastName: 'Gaillard',
        grades: [9, 11, 18]
    }),
});

// View
studentView = Ember.View.create({
    templateName: 'student',
    controller: studentController
});
studentView.appendTo('body');