How to do _fast_ table sorting in Ember.js?

Question

I have an Ember application which renders a table of ~200-300 rows. I tried to implement Tablesorter-like functionality but ran across very poor performance.

Outline of the relevant part of application is the following: there is a collection of objects, an ArrayController and CollectionView. CollectionView#content is bound to ArrayController#arrangedContent and sorting is done by setting ArrayController#sortProperties property.

I have setup a JS fiddle for convenience: http://jsfiddle.net/496tT/1/ . In Chrome in JS console you can see that raw sorting takes ~5ms and table sorting takes ~1000ms.

In my current implementation Ember rerenders all views when arrangedContent gets updated. I suppose that sorting could be speed up by sorting item views within CollectionView hence effectively reattaching views to the DOM in a proper order. But I have no idea how to do this properly in Ember.js.

Any thoughts?

PS — There is a duplicate here on SO — https://stackoverflow.com/questions/12915647/table-sort-with-emberjs-clear-and-rebuild-the-table — but it has no answer; in this question I have set up a fiddle for convenience.

Answer 1

I don't know if this will get you enough of a speed increase for what you are doing, but one thing you can do is change what the view binds to. You have it bound to controller.arrangedContent instead of just controller. In the fiddle if I change:

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

to:

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

Things go from around 9 seconds "rawsort" to 6 seconds for me. The s1 and s2 also average around 900 instead of 1400 or so.