Emberjs Handlebars当每个绑定到计算属性时，每个助手缓慢

Question

当我使用#each helper或绑定到Ember.ArrayController的某些计算属性的集合视图呈现项目列表时，我遇到了性能问题。表现还不错，只有10到20个小项目，但大约50-100个项目开始相当明显。请检查过了几待办事项或单击“添加待办事项”

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

我注意到，在DOM中childViews得到重新渲染每次变化，这很可能是预期的行为目前，我希望能够将未完成的待办事项列表的DOM从待删除的待办事项中删除，并将其附加到已完成的待办事项列表的底部，这在理论上会更便宜。

我希望能够回答的问题是，我是在查看Ember集合视图的性能问题，还是显示从计算属性填充不良主意的列表，如果是，我需要手动管理待办事项模型在视图层中的位置从未完成变为完成，反之亦然。

Answer 1

这是如何{{#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。