JSFiddle - React, Tailwind, and code Playground

by ohcibi

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>

<script type="text/x-handlebars" data-template-name="application">
    <h1></h1>
    {{outlet}}
  </script>
  <script type="text/x-handlebars" data-template-name="rooms">
    <ul id="rooms">
      {{#each controller}}
        <li>
          <h1>{{name}}</h1>
        </li>
      {{/each}}
    </ul>
  </script>

JavaScript

window.App = Ember.Application.create();

App.Router.map(function() {
  return this.resource('rooms');
});

App.RoomsController = Ember.ArrayController.extend({
  sortProperties: ['room_id']
});

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

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

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

App.Room = DS.Model.extend({
  room_id: DS.attr('string'),
  name: DS.attr('string'),
  devices: DS.hasMany('App.CompoundDevice')
});

App.Room.FIXTURES = [
  {
    id: 1,
    name: "Wohnzimmer",
    room_id: "hz_1",
    devices: [2]
  }, {
    id: 2,
    name: "Schlafzimmer",
    room_id: "hz_2"
  }, {
    id: 3,
    name: "Küche",
    room_id: "hz_3",
    devices: [4]
  }, {
    id: 4,
    name: "Bad",
    room_id: "hz_4",
    devices: [1, 5]
  }, {
    id: 5,
    name: "Flur",
    room_id: "hz_5"
  }, {
    id: 6,
    name: "Garten",
    room_id: "hz_6",
    devices: [3]
  }
];