JSFiddle - React, Tailwind, and code Playground

by stephane_klein

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.8.1.min.js"></script>
<script type="text/x-handlebars"> 
    <h1>Game 1</h1>
        <ul>
            <li>{{view Ember.TextField valueBinding="MyApp.games.0.sets.0.value"}}</li>
            <li>{{view Ember.TextField valueBinding="MyApp.games.0.sets.1.value"}}</li>
            <li>{{view Ember.TextField valueBinding="MyApp.games.0.sets.2.value"}}</li>
            <li>{{view Ember.TextField valueBinding="MyApp.games.0.sets.3.value"}}</li>
            <li>{{view Ember.TextField valueBinding="MyApp.games.0.sets.4.value"}}</li>
        </ul>

        <p>Total : {{MyApp.games.0.total}}</p>

    <h1>Game 2</h1>
        <ul>
            <li>{{view Ember.TextField valueBinding="MyApp.games.1.sets.0.value"}}</li>
            <li>{{view Ember.TextField valueBinding="MyApp.games.1.sets.1.value"}}</li>
            <li>{{view Ember.TextField valueBinding="MyApp.games.1.sets.2.value"}}</li>
            <li>{{view Ember.TextField valueBinding="MyApp.games.1.sets.3.value"}}</li>
            <li>{{view Ember.TextField valueBinding="MyApp.games.1.sets.4.value"}}</li>
        </ul>

        <p>Total : {{MyApp.games.1.total}}</p>

    <h1>Game 3</h1>
        <ul>
            <li>{{view Ember.TextField valueBinding="MyApp.games.2.sets.0.value"}}</li>
            <li>{{view Ember.TextField valueBinding="MyApp.games.2.sets.1.value"}}</li>
            <li>{{view Ember.TextField valueBinding="MyApp.games.2.sets.2.value"}}</li>
            <li>{{view Ember.TextField valueBinding="MyApp.games.2.sets.3.value"}}</li>
            <li>{{view Ember.TextField valueBinding="MyApp.games.2.sets.4.value"}}</li>
        </ul>

        <p>Total : {{MyApp.games.2.total}}</p>
</script>

JavaScript

MyApp = Ember.Application.create();

MyApp.Game = Ember.Object.extend({
    init: function() {
        this._super();
        this.set('sets', Ember.A([]));
        this.get('sets').pushObject(Ember.Object.create({ value: '' })); 
        this.get('sets').pushObject(Ember.Object.create({ value: '' })); 
        this.get('sets').pushObject(Ember.Object.create({ value: '' })); 
        this.get('sets').pushObject(Ember.Object.create({ value: '' }));
        this.get('sets').pushObject(Ember.Object.create({ value: '' })); 
    },
    total: function() {
        var total = 0;
        this.sets.forEach(function(item) {
            if (
                (item.value != '') &&
                (!isNaN(item.value)) 
            ) {
                total += parseInt(item.value);
            }
        });
        return total;
    }.property('[email protected]')
});

MyApp.games = [
    MyApp.Game.create(),
    MyApp.Game.create(),
    MyApp.Game.create()
];