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

Question

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

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

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

在我当前的实现中，Ember 会在 arrangedContent 时重新渲染所有 View 。得到更新。我想可以通过对 CollectionView 中的项目 View 进行排序来加快排序速度。因此以正确的顺序有效地将 View 重新附加到 DOM。但我不知道如何在 Ember.js 中正确执行此操作。

有什么想法吗？

PS——这里有一个重复的 SO——https://stackoverflow.com/questions/12915647/table-sort-with-emberjs-clear-and-rebuild-the-table ——但它没有答案；在这个问题中，为了方便起见，我设置了一个 fiddle 。

Answer 1

我不知道这是否会让你的工作速度得到足够的提升，但你可以做的一件事是改变 View 绑定(bind)的内容。您将其绑定(bind)到 controller.arrangedContent 而不仅仅是 Controller 。如果我改变，在 fiddle 中:

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 左右。