7

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

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

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

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

有什么想法吗？

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

4

1 回答 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'
    })
});

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

于 2012-12-06T05:43:49.413 回答