JSFiddle - React, Tailwind, and code Playground

by Kerrick

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.4/handlebars.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-1.0.0-rc.6.1.min.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-data-0.13.js"></script>
  <script type="text/x-handlebars">
    <h2>Welcome to Ember.js</h2>
    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="items">
    <ul>
    {{#each item in model}}
    <li>{{#linkTo 'item' item}}{{item.name}}{{/linkTo}}</li>
    {{/each}}
    </ul>

    {{outlet}}
  </script>

  <script type="text/x-handlebars" data-template-name="item">
    {{name}}: {{details}}
  </script>

CSS

html, body {
    margin: 20px;
}

JavaScript

App = Ember.Application.create();
App.Store = DS.Store.extend({
    adapter: DS.FixtureAdapter.extend()
});
App.Item = DS.Model.extend({
    name: DS.attr('string'),
    details: DS.attr('string')
});

App.Item.FIXTURES = [
    { id: 1, name: "One", details: "One details" },
    { id: 2, name: "Two", details: "Two details" },
    { id: 3, name: "Three", details: "Three details" }
]

App.Router.map(function () {
  this.resource('items', function() {
    this.resource('item', { path: ':item_id' });
  });
});

App.IndexRoute = Ember.Route.extend({
  redirect: function() {
    this.transitionTo('items');
  }
});

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


App.ItemsIndexRoute = Ember.Route.extend({
  redirect: function () {
    this.transitionTo('item', this.modelFor('items').get('firstObject'));
  }
});