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({});

// Router and routes

App.Router.map(function(){
  this.route('training');
});

App.ApplicationRoute = Em.Route.extend({
  setupController: function() {
    var store = this.get('store');
    store.load(App.Training, {id: 1, title: 'Training 1', exercises: [1]});
    store.load(App.Exercise, {id: 1, name: 'Exercise 1', training: 1});
  }
});
  
App.IndexRoute = Em.Route.extend({
  redirect: function() {
    this.transitionTo('training');
  }
});
    
App.TrainingRoute = Em.Route.extend({
  model: function() {
    return App.Training.find(1);
  }
});

// Store and models

App.Store = DS.Store.extend({
  revision: 11,
  adapter: DS.RESTAdapter.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')
});

// Controller

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();
  }
});