如何在Ember.js中进行_fast_表排序？

Question

我有一个Ember应用程序,它呈现一个约200-300行的表.我尝试实现类似Tablesorter的功能,但遇到了非常糟糕的性能.

应用程序相关部分的概要如下:有一个对象集合,一个ArrayController和CollectionView.CollectionView#content绑定ArrayController#arrangedContent并通过设置ArrayController#sortProperties属性完成排序.

为方便起见,我设置了一个JS小提琴:http://jsfiddle.net/496tT/1/.在JS控制台的Chrome中,您可以看到原始排序需要大约5毫秒,表排序需要大约1000毫秒.

在我当前的实现中,Ember arrangedContent在更新时重新呈现所有视图.我认为通过对项目视图进行排序可以加快排序速度,CollectionView从而以适当的顺序有效地将视图重新连接到DOM.但我不知道如何在Ember.js中正确地做到这一点.

有什么想法吗？

PS - 这里有重复的SO - /sf/ask/904095321/ - 但它没有答案; 在这个问题中,我为方便起见设置了一个小提琴.

Answer 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'
    })
});

对我来说，事情从大约 9 秒的“原始排序”变成了 6 秒。s1 和 s2 的平均值也约为 900，而不是 1400 左右。