JSFiddle - React, Tailwind, and code Playground

by raulb

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.1.js"></script>
<script src="https://gist.github.com/hashg/4979893/raw/a0d985c57feede20fd9cdc363d0f9d09e3cfd40f/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="application">
   <div id="top">
     <div id="container">
      {{outlet}}
     </div>
   </div>
 </script>

 <script type="text/x-handlebars" data-template-name="index">
     <ul>
       {{#each project in controller}}
       <li>
          {{project.title}}
       </li>
       {{/each}}
     </ul>
  <div>{{name}}</div>
 </script>

CSS

#container {
 width: 100%;
}
#sidebar {
 float: left;
 width: 300px;
}
#content {
 margin-left: 300px;
}
h5{
    margin: 0px;
}
}

JavaScript

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


App.Store = DS.Store.extend({
  revision: 12,
  adapter: 'DS.FixtureAdapter'
});
    
App.ApplicationRoute = DS.Route.extend({
  setupController: function(controller) {
    controller.set('model', App.Project.find());
  }
};

App.Project = DS.Model.extend({
  title: attr('string'),  
  entries: hasMany('App.Entry')
});

App.Entry = DS.Model.extend({
  name: attr('string'),
  project: belongsTo('App.Project')
})

App.Project.FIXTURES = [{
  id: 1,
  title: 'Alpha',  
  entries: [11, 12]
},{
  id: 2,
  title: 'Roger',  
  entries: [13, 14]
},{
  id: '3',
  title: 'Tango',  
  entries: [15]
}];

App.Entry.FIXTURES = [{
  id: 11,
  name: 'Entry 11',
  project: 1
},{
  id: 12,
  name: 'Entry 12',
  project: 1,
},{
  id: 13,
  name: 'Entry 13',
  project: 2
},{
  id: 14,
  name: 'Entry 14',
  project: 2
},{
  id: 15,
  name: 'Entry 15',
  project: 3
}];
    
})();