JSFiddle - React, Tailwind, and code Playground

by Andrew Gerst

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.6/ember.min.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-83f9f6b9124612d3ac0b8ab34ad98b6028800138.min.js"></script>
  <script type="text/x-handlebars">

    <nav>
      {{#linkTo "users"}}Users{{/linkTo}}
      {{#linkTo "user" "me"}}Me{{/linkTo}}
    </nav>

    {{outlet}}

  </script>

  <script type="text/x-handlebars" data-template-name="index">
  </script>

  <script type="text/x-handlebars" data-template-name="users">

    <h2>User list</h2>

    <table class="table">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Email</th>
        </tr>
      </thead>
      <tbody>
        {{#each model}}
          <tr class="odd-even">
            <td>{{#linkTo "user" this}}{{id}}{{/linkTo}}</td>
            <td>{{name}}</td>
            <td>{{email}}</td>
          </tr>
        {{/each}}
      </tbody>
    </table>
  </script>

  <script type="text/x-handlebars" data-template-name="user">

    <h2>Details for user: {{id}}</h2>

    <div class="form_labels_wrapper">
      <dl class="dl-horizontal">
        <dt>Name:</dt>             <dd>{{name}}</dd>
        <dt>Email:</dt>            <dd>{{email}}</dd>
      </dl>
    </div>
  </script>

JavaScript

App = Ember.Application.createWithMixins({
    LOG_TRANSITIONS: true,
    LOG_VIEW_LOOKUPS: true,
    LOG_ACTIVE_GENERATION: true,
    LOG_VERSION: true,
    LOG_BINDINGS: true
});

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

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

App.User.FIXTURES = [
    { id: 'me',       name: 'Max Smith',     email: '[email protected]' },
    { id: 'user1953', name: 'John Gabriel',  email: '[email protected]' },
    { id: 'user2341', name: 'Mark Bush',     email: '[email protected]' }
];

App.Router.map(function() {
    this.resource("users");
    this.resource("user",  { path: "/user/:user_id" });
});

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

App.UserRoute = Ember.Route.extend({
    serialize: function(model) {
        return {user_id:model};
    }
});

App.UserIndexRoute = Ember.Route.extend({
    model: function(params) {
        return App.User.find(params.user_id);
    }
});