Ember.jsで_fast_テーブルソートを行う方法は？

Question

私は200〜300行のテーブルをレンダリングするEmberアプリケーションを持っています。私はTablesorterのような機能を実装しようとしましたが、パフォーマンスは非常に悪いです。

アプリケーションの関連部分の概要は次のとおりです。オブジェクトのコレクションはArrayControllerとCollectionViewです。 CollectionView#contentはArrayController#arrangedContentにバインドされ、ソートはArrayController#sortPropertiesプロパティを設定することによって行われます。

便宜のためにJSフィドルを設定しました：http://jsfiddle.net/496tT/1/。 JSコンソールのChromeでは、未処理のソートには約5ms、表のソートには約1000msかかることがわかります。

私の現在の実装では、arrangedContentが更新されるとEmberはすべてのビューを元に戻します。私は並べ替えによって速度を上げることができると思いますアイテムビューCollectionViewの範囲内にあるので、DOMへのビューを効果的に正しい順序で再接続します。しかし、私はEmber.jsでこれを正しく行う方法がわかりません。

どのような考えですか？

PS - SO-https://stackoverflow.com/questions/12915647/table-sort-with-emberjs-clear-and-rebuild-the-tableには重複がありますが、答えはありません。この質問で私は便宜のためにフィドルを設定しました。

Answer 1

これは、あなたがやっていることのスピードアップを十分に引き出せるかどうかは分かりませんが、あなたができることの1つは、ビューのバインドを変更することです。コントローラーの代わりにcontroller.arrangedContentにバインドされています。フィドルでは私が変更した場合：

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

に：

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

物事が私のために6秒に約9秒 "rawsort" から行きます。 s1とs2の平均値は1400程度ではなく、900程度です。