JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-latest.min.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <p>Hi, I am an application!</p>
    <p>
        Sort by:
        <a {{action sortByKey1}}>(key1)</a>
        <a {{action sortByKey2}}>(key2)</a>
    </p>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="element">
    <p>
        ({{trace view}})
        {{#with view.content}}
        An element: key1 = {{key1}} ; key2 = {{key2}};
        <div style="color: white; width: 0; height: 0;">
            <!-- Simulate heavy item view. -->
            <span>{{key1}}</span>
            <span>{{key2}}</span>
            <span>{{key1}}</span>
            <span>{{key2}}</span>
            <span>{{key1}}</span>
            <span>{{key2}}</span>
            <span>{{key1}}</span>
            <span>{{key2}}</span>            
        </div>
        {{/with}}
    </p>
</script>

<div id="root"></div>

CSS

ul, li {
    list-style-type: disc;
    margin-left: 10px;
}

JavaScript

App = Ember.Application.create({
    rootElement: $('#root')
});

App.Element = Ember.Object.extend({
    key1: null,
    key2: null
});

App.MyController = Ember.ArrayController.extend({
    sortProperties: [ 'key1' ],
    sortAscending: true,
});

App.MyView = Ember.CollectionView.extend({
    tagName: 'ul',
    contentBinding: 'controller.arrangedContent',
    itemViewClass: Ember.View.extend({
        tagName: 'li',
        templateName: 'element'
    })
});

App.ApplicationView = Ember.View.extend({ templateName: 'application' });
App.ApplicationController = Ember.Controller.extend({});

App.Router = Ember.Router.extend({
    enableLogging: true,
    root: Ember.Route.extend({
        index: Ember.Route.extend({
            route: '/',
            sortByKey1: function(router) {
                router.set('myController.sortProperties', [ 'key1' ]);
                console.time('s1');
                Ember.run.next(function() { console.timeEnd('s1'); });
            },
            sortByKey2: function(router) {
                router.set('myController.sortProperties', [ 'key2' ]);
                console.time('s2');
                Ember.run.next(function() { console.timeEnd('s2'); });
            },
            connectOutlets: function(router) {
                var i, elements = [];
                for (i = 0; i < 300; ++i) {
                    elements.pushObject(
                        App.Element.create({
                            key1: i,
                            key2: (997 * i + 47) % 293
                        })
                    );
                }
                console.time('rawSort');
                elements.sort(function(lhs, rhs) {
                    return lhs.get('key1') < rhs.get('key1') ? -1 : 1;
                });
                console.timeEnd('rawSort');
                router.get('applicationController').connectOutlet('my');
                router.set('myController.content', elements);
            }
        })
   ...