当我使用 #each 帮助程序或绑定到 Ember.ArrayController 的某些计算属性的集合视图呈现项目列表时，我遇到了性能问题。 10 - 20 个项目的小列表的性能很好，但在 50 - 100 左右它开始明显滞后。尝试检查一些待办事项或点击“添加待办事项”
示例代码在这里：http://jsfiddle.net/Jonesy/ed3ZS/4/
我注意到 DOM 中的子视图会随着每次更改而重新呈现，这很可能是目前的预期行为，但我更希望能够从 DOM 中删除一个待办事项将未完成的待办事项列表单独附加到已完成的待办事项列表的底部，理论上成本会低得多。
我希望回答的是，我是在查看 Ember 集合视图的性能问题，还是显示从计算属性填充的列表是个坏主意，如果是，我是否需要手动管理待办事项模型在视图层中的位置，因为它从未完成变为已完成，反之亦然。
【问题讨论】：
标签： ember.js
这是{{#each}}（和CollectionView，这是它的动力）工作方式的副作用。
在内部，CollectionView 使用称为 数组观察者 的东西。数组观察者允许您订阅使用Ember.Array 的突变方法（replace、pushObject、popObject 等）对数组所做的突变。数组观察者的 API is described here。
这意味着，如果你将一个新对象推送到集合视图中，它会在 DOM 中插入渲染一个新元素，并将其余元素留在原处。
但是，在您发布的示例中，数组并没有发生变化——每次添加或删除新项目时，您都会创建一个全新的 Array 对象。当绑定同步时，它用新数组替换旧数组。对于{{#each}}，这与删除所有元素然后重新添加它们没有什么不同。
该问题的解决方案是使用单个数组，而不是每次更改时返回不同数组对象的计算属性。你可以看到the Contacts app for an example of how to do this。
显然，这是一种非常常见的模式，我们希望在未来向Ember.ArrayController 添加一些默认情况下会执行正确操作的过滤。
【讨论】：