How to sort the _fast_ table in Ember.js?

Question

I have an Ember application that displays a table of ~ 200-300 rows. I tried to implement Tablesorter-like functionality, but ran into very poor performance.

The structure of the corresponding part of the application is as follows: there is a collection of objects, ArrayController and CollectionView . CollectionView#content bound to ArrayController#arrangedContent , and sorting is done by setting the ArrayController#sortProperties .

I installed the JS script for convenience: http://jsfiddle.net/496tT/1/ . In Chrome, in the JS console, you can see that raw sorting takes ~ 5 ms, and table sorting takes ~ 1000 ms.

In my current implementation, Ember retains all views when updating arrangedContent . I believe that sorting can be accelerated by sorting the representations of the elements in the CollectionView , which means that you can effectively reconnect the views to the DOM in the correct order. But I do not know how to do it correctly in Ember.js.

Any thoughts?

PS. There is a duplicate on SO - https://stackoverflow.com/questions/12915647/table-sort-with-emberjs-clear-and-rebuild-the-table - but there is no answer; in this question I installed a fiddle for convenience.

Answer 1

I don’t know if the speed increase is enough for what you are doing, but one thing you can do is change what binds the view. You are tied to the .arrangedContent controller, not just the 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' }) }); 

in

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

Things go from 9 seconds "rawsort" to 6 seconds for me. S1 and s2 are also on average about 900 instead of 1400 or so.