ember.js - Emberjs Handlebars #each 助手在绑定(bind)到计算属性时速度缓慢

Question

当我使用 #each 帮助器或绑定(bind)到 Ember.ArrayController 的某些计算属性的 Collection View 渲染项目列表时，遇到了性能问题。对于 10 - 20 个项目的小列表，性能还不错，但在 50 - 100 个项目左右，它开始明显滞后。尝试勾选一些待办事项或点击“添加待办事项”

示例代码在这里:http://jsfiddle.net/Jonesy/ed3ZS/4/

我注意到 DOM 中的 childView 会随着每次更改而重新渲染，这很可能是目前的预期行为，但我更希望能够从 DOM 中删除一个待办事项未完成的待办事项单独列出并附加到已完成的待办事项列表的底部，理论上成本要低得多。

我希望回答的是我是否正在考虑 Ember Collection View 的性能问题，或者显示从计算属性填充的列表是一个坏主意，如果是这样，我是否需要手动管理当待办事项从未完成变为已完成时，todo 模型在 View 层中的位置，反之亦然。

Answer 1

这是 {{#each}}(以及 CollectionView，它的动力来源)工作方式的副作用。

在内部，CollectionView 使用称为数组观察者的东西。数组观察器允许您订阅使用 Ember.Array 的突变方法(replace、pushObject)对数组进行的突变、popObject 等)数组观察者的 API is described here .

这意味着，如果您将一个新对象推送到 Collection View 中，它将在 DOM 中插入渲染一个新元素，并将其余元素保留在原处。

但是，在您发布的示例中，数组并未发生变化 - 每次添加或删除新项目时，您都会创建一个全新的 Array 对象。当绑定(bind)同步时，它会用新数组替换旧数组。对于{{#each}}来说，这与删除所有元素然后将它们添加回来没有什么不同。

问题的解决方案是使用单个数组，而不是每次更改时返回不同数组对象的计算属性。您可以看到the Contacts app for an example of how to do this .

显然，这是一种非常常见的模式，我们希望添加某种过滤功能，以便在默认情况下为 Ember.ArrayController 执行正确的操作。