2012-11-22 8 views
7

Mam aplikację Ember, która renderuje tabelę z ~ 200-300 rzędów. Próbowałem zaimplementować funkcję podobną do Tablesortera, ale jej wydajność była bardzo niska.Jak zrobić _fast_ sortowanie tabel w Ember.js?

Zarys odpowiedniej części wniosku jest następujący: istnieje zbiór obiektów, ArrayController i CollectionView. CollectionView#content jest związany z ArrayController#arrangedContent, a sortowanie odbywa się poprzez ustawienie właściwości ArrayController#sortProperties.

Mam skonfigurować skrzypce JS dla wygody: http://jsfiddle.net/496tT/1/. W Chrome w konsoli JS widać, że sortowanie surowe zajmuje ~ 5 ms, a sortowanie tabel zajmuje ~ 1000 ms.

W mojej obecnej implementacji Ember ponownie wyświetla wszystkie widoki po zaktualizowaniu arrangedContent. Przypuszczam, że sortowanie może przyspieszyć sortowanie widoków pozycji w ramach CollectionView, a więc skutecznie ponownie dołączyć widoki do DOM w odpowiedniej kolejności. Ale nie mam pojęcia, jak to zrobić poprawnie w Ember.js.

Jakieś myśli?

PS - Istnieje duplikat tutaj na SO - https://stackoverflow.com/questions/12915647/table-sort-with-emberjs-clear-and-rebuild-the-table - ale nie ma odpowiedzi; w tym pytaniu ustawiłem skrzypce dla wygody.

Odpowiedz

1

Nie wiem, czy spowoduje to zwiększenie prędkości dla tego, co robisz, ale jedną rzecz, którą możesz zrobić, to zmienić to, z czym widok się wiąże. Masz to związane z controller.arrangedContent zamiast tylko kontrolerem. Na skrzypcach jeśli zmienię:

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

do:

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

coś pójdzie z około 9 sekund "rawsort" do 6 sekund za mną. Wartości s1 i s2 również wynoszą około 900 zamiast 1400.