JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="http://cl.ly/code/3A3Y0b1i0W0k/ember.js"></script>
<script type="text/x-handlebars" data-template-name="index">
  <div class="patient-view extended">
    {{#each controller}}
    <p>Name: {{name}}</p>
    {{/each}}    
  </div>
</script>

JavaScript

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

App.Patient = Em.Object.extend({
  order: undefined,
  name: undefined
});

App.IndexView = Em.View.extend({
  click: function(){
    var contr = this.get('controller');
    contr.set('sortAscending', !contr.get('sortAscending'));
  }
});

App.IndexController = Em.ArrayController.extend({
  sortProperties: ['order'],
  sortAscending: false
});

App.data = Em.A([App.Patient.create({
  name: "Bert",
  order: 2
}), App.Patient.create({
  name: "Ernie",
  order: 1
})]);

App.IndexRoute = Em.Route.extend({
  model: function() {
    return App.data;         
  }
});

var count = 2;

setInterval(function(){
  count++;
  App.data.addObject(App.Patient.create({
    order: count,
    name: "someoneelse" + count
  }));
}, 1000);