JSFiddle - React, Tailwind, and code Playground

by Kiwiupover

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.2/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-pre.4/ember.js"></script>
<script src="http://previewmyvideo.com/ember-data.js"></script>
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<body>

    <script type="text/x-handlebars" data-template-name="application">
    application stuff like nav goes here
    <br>
    {{outlet}}
    </script>

    <script type="text/x-handlebars" data-template-name="posts">
    <br>
    'posts'
    <br>
    {{outlet}}
    </script>

    <script type="text/x-handlebars" data-template-name="posts/index">
    <br>
    'posts/index'
    <br>
    {{#each post in controller}}
        name: {{post.name}}
        <br>{{#linkTo post.edit post}}Edit{{/linkTo}}
        <br><br>
    {{/each}}
    </script>

    <script type="text/x-handlebars" data-template-name="post">
    <h3>I am a post</h3>

    {{#with controller}}
        id: {{id}}
        <br>title: {{name}}
        <br>{{#linkTo post.edit}}edit{{/linkTo}}
    {{/with}}

    <br><br>{{outlet}}
    </script>

    <script type="text/x-handlebars" data-template-name="post/edit">
    <br>
    <form>
    Edit {{name}}
    {{view Ember.TextField valueBinding="name" placeholder="Name"}}
    <br>
    <button href='#' {{action update target='controller'}}>Update</button><a href='#' {{action cancel target='controller'}}>Cancel</a>
    </form>
    </script>

</body>
</html>

JavaScript

window.App = Ember.Application.create({
    LOG_TRANSITIONS: true
});

App.Router.map(function() {
    this.resource('posts', { path: '/posts' }, function() {
      this.resource('post', { path: '/:post_id' }, function() {
          this.route('edit', { path: '/edit' });
      });
    });
});

App.IndexRoute = Ember.Route.extend({
    setupController: function(controller){
        this.transitionTo('posts');
    }
});

App.PostsIndexRoute = Ember.Route.extend({
    model: function() {
        return App.Posts.find();
    }
});

App.PostRoute = Ember.Route.extend({
    model: function(params) {
        return App.Posts.find(params.post_id);
    }
});
App.PostEditRoute = Ember.Route.extend({
  model: function(params) {
    return App.Poat.find(params.post_id);
  },
  setupController: function(controller, model) {
    controller.set('content', model);
  }
});
App.PostEditController = Ember.ObjectController.extend({
  update: function() {
    this.store.commit();
    return this.transitionToRoute('siteSales.show', this.content);
  },
  cancel: function() {
    if (this.content.isDirty){
      this.content.rollback();
    }
    return this.transitionTo('post', this.content);
  }
});

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

App.Posts = DS.Model.extend({
    name: DS.attr('string')
});

App.Posts.FIXTURES = [{
    id:   1,
    name: 'My first post'
},{
    id:   2,
    name: 'Another awesome post'
}];