JSFiddle - React, Tailwind, and code Playground

by midu

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.4.js"></script>
<table id="the-table">
<thead>
<tr>
<th>status</th>
<th>title</th>
<th>url</th>
<th># messages</th>
<th>judging status</th>
</tr>
</thead>
</table>

<script type="text/x-handlebars" data-template-name="submissions">
    {{#collection contentBinding="App.submissionsController"}}
      <tr>
        <td>{{content.status}}</td>
        <td>{{content.title}}</td>
        <td><a href="{{content.url}}">note</a></td>
        <td>{{content.nbMessages}}</td>
        <td>{{content.judgingStatus}}</td>
      </tr>
    {{/collection}}
</script>

CSS

table {
 border-collapse: collapse;
}

td, th {
  border: 1px solid black;
  padding: 5px;
}

JavaScript

var App = Em.Application.create({
  ready: function () {
    App.submissionsController.index();
    this._super();
  }
});

// model
App.Submission = Em.Object.extend({
  title: null,
  judgingStatus: null,
  status: null,
  url: null,
  nbMessages: 0
});

// controller... not really.
App.submissionsController = Em.ArrayController.create({
  content: [ App.Submission.create({title: 'kevin', status: 'a', judgingStatus: 'b', url: 'http://google.com', nbMessages: 1}) ],

  index: function () {
    // simulates data that arrives to the page after a few seconds (think ajax request)
    window.setTimeout(function () {
      App.submissionsController.set('content', [
          App.Submission.create({title: 'stefano', status: 'c', judgingStatus: 'd', url: 'http://stackoverflow.com', nbMessages: 2})
      ]);
    }, 2000);
  }
});

Em.View.create({
  templateName: 'submissions',
  tagName: 'pre'
}).appendTo('#the-table');