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() {
        var content = this.get("content");
        // It seems if you don't clone the content array, then Ember will not update the view.
        // If you rebuild the array via a custom sort implementation, this may be a non-issue?
        // Another option is to temporarily set the content property to null, i.e. this.set('content', null);       
        this.set('content', Ember.copy(content.sort(), true));
    }
});

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();      
    }
})