JSFiddle - React, Tailwind, and code Playground

by Nick Iaconis

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://builds.emberjs.com/handlebars-1.0.0-rc.4.js"></script>
<script src="http://builds.emberjs.com/ember-1.0.0-rc.5.js"></script>
<script src="http://builds.emberjs.com/ember-data-latest.js"></script>
<script type="text/x-handlebars">
    {{outlet}}
  </script>
  <script type="text/x-handlebars" data-template-name="cohorts">
    {{#each cohort in controller}}
      {{#linkTo 'cohort' cohort classNames="btn btn-success"}}
        {{cohort.name}}
      {{/linkTo}}
    {{/each}}
  
    <hr/>

    {{outlet}}
  </script>
  <script type="text/x-handlebars" data-template-name="cohort">
    <h4>{{name}}</h4>
      <ul>
        {{#each boot in boots}}
          <li>{{boot.name}}</li>
        {{/each}}
      </ul>
  </script>

CSS

body {
  margin: 50px;
}

JavaScript

Plato = Ember.Application.create({
  ready: function() {
    console.log('App ready');
  }
});

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

Plato.Store = DS.Store.extend({
  revision: 13,
  adapter: DS.FixtureAdapter.extend({
    queryFixtures: function(fixtures, query, type) {
      console.log(query);
      console.log(type);
      return fixtures.filter(function(item) {
        for (var prop in query) {
          if (item[prop] != query[prop]) {
            return false;
          }
        }
        return true;
      });
    }
  })
});

Plato.Router.map(function(){
 this.resource('cohorts', function(){
    this.resource('cohort', {path: '/:cohort_id'});
  });
});

Plato.CohortsRoute = Ember.Route.extend({
 model: function(){
  return Plato.Cohort.find();
  }
});

Plato.CohortsController = Ember.ArrayController.extend();

Plato.CohortController = Ember.ObjectController.extend({
  boots: function() {
    return Plato.Boot.find({cohort:this.get('id')});
  }.property('@each')
});

Plato.BootsController = Ember.ArrayController.extend();

Plato.Cohort = DS.Model.extend({
 name: DS.attr('string')
});

Plato.Boot = DS.Model.extend({
 name: DS.attr("string"),
 cohort: DS.belongsTo('Plato.Cohort')
});

Plato.Cohort.FIXTURES = [{
  id: 1,
  name: 'Foo Cohort'
},{
  id: 2,
  name: 'Bar Cohort'
}];

Plato.Boot.FIXTURES = [{
  id: 1,
  name: 'Bar Boot',
  cohort: 1
},{
  id: 2,
  name: 'Foo Boot',
  cohort: 1
},{
  id: 3,
  name: 'Foobar Boot',
  cohort: 2
}];