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

【问题标题】：How to do _fast_ table sorting in Ember.js?如何在 Ember.js 中进行 _fast_ 表排序？
【发布时间】：2012-12-06 13:43:49
【问题描述】：

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

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

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

在我当前的实现中，当 arrangedContent 更新时，Ember 会重新呈现所有视图。我想可以通过在CollectionView 中对 item views 进行排序来加快排序，从而以正确的顺序有效地将视图重新附加到 DOM。但我不知道如何在 Ember.js 中正确执行此操作。

有什么想法吗？

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

【问题讨论】：

标签： ember.js

【解决方案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 左右。

【讨论】：