JSFiddle - React, Tailwind, and code Playground

by tothda

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.rc.2/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-pre.4.js"></script>
<script src="http://f.cl.ly/items/0i181h1Q473G0N283i24/ember-data.js"></script>
  <script type="text/x-handlebars">
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="training">
    {{#unless editing}}
        <button {{action edit}}>Edit</button>
    {{else}}
        <button {{action create}}>Add New</button>
        <button {{action rollback}}>Rollback</button>
    {{/unless}}
    <br/><br/>
    <h1>{{title}}</h1>
    <h2>Exercises:</h2>
    <ul>
      {{#each exercise in exercises}}
        <li>
          {{exercise.name}} ({{exercise.stateManager.currentState.path}})
        </li>
      {{/each}}
    </ul>
  </script>

CSS

h1 { font-size: 28px}
h2 { font-size: 20px}
li { 
    list-style-type: circle;
    margin-left: 30px;
}

JavaScript

App = Ember.Application.create();

  App.Router.map(function(){
    this.route('training');
  });  
  
  App.IndexRoute = Em.Route.extend({
    redirect: function() {
      this.transitionTo('training');
    }
  });
    
  App.TrainingRoute = Em.Route.extend({
    model: function() {
      return App.Training.find(1);
    }
  });

  App.Store = DS.Store.extend({
    revision: 11,
    adapter: DS.FixtureAdapter.extend()
  });

  App.Training = DS.Model.extend({
    title: DS.attr('string'),
    exercises: DS.hasMany('App.Exercise')
  });
  
  App.Exercise = DS.Model.extend({
    name: DS.attr('string'),
    training: DS.belongsTo('App.Training')
  });
  
  App.Training.FIXTURES = [
    {id: 1, title: 'Training 1', exercises: [1]}
  ]

  App.Exercise.FIXTURES = [
    {id: 1, name: 'Exercise 1', training: 1}
  ]

  App.TrainingController = Em.ObjectController.extend({
      editing: false,
      
    edit: function() {
      this.set('editing', true);
      transaction = this.get('store').transaction()
      transaction.add(this.get('model'))
    },
    
    create: function() {
      this.get('model.exercises').createRecord({name: 'New training'})
    },
    
    rollback: function() {
      this.set('editing', false);
      this.get('model.transaction').rollback();
    }
  });