JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.5.min.js"></script>
<script type="text/x-handlebars">
  <h1>Activities</h1>
  <ul>
      {{#each App.activities}}
          <li>{{this}}</li>
      {{/each}}
  </ul>  
  {{view App.SortButton targetBinding="App.activities"}}  
</script>

CSS

ul {
  list-style-type:square; 
}
ul li {
  margin-left: 20px;
}

JavaScript

App = Ember.Application.create();

App.activities = Ember.ArrayController.create({
    content: ['sleeping', 'eating pizza','programming', 'looking at lolcats'],
    sort: function() {
        this.propertyWillChange('content');
        this.get("content").sort();
        this.propertyDidChange('content');
    }
});

App.ActivityView = Ember.View.extend({
    tagName: "li",
    template: Ember.Handlebars.compile("{{content}}")
});

App.SortButton = Ember.View.extend({
    tagName: "button",
    template: Ember.Handlebars.compile("Sort"),
    click: function() {
      this.get("target").sort();      
    }
})