当我使用#each帮助器或绑定到Ember.ArrayController的某些计算属性的集合视图渲染项目列表时,我遇到了性能问题.性能很好,有一个10-20项的小清单,但大约50-100,它开始明显滞后.尝试检查几个待办事项或点击"添加待办事项"
示例代码在这里:http://jsfiddle.net/Jonesy/ed3ZS/4/
我注意到DOM中的childViews会在每次更改时重新呈现,这很可能是目前的预期行为,但我更愿意能够从未完成的待办事项列表的DOM中删除待办事项.单独地并附加到完成的待办事项列表的底部,理论上这将更便宜.
我希望回答的是我是否在查看Ember集合视图的性能问题,或者显示从计算属性填充的列表是个坏主意,如果是这样,我是否需要手动管理todo模型的位置在视图层中,它从未完成变为完成,反之亦然.
小智 13
这是一个副作用,它是如何{{#each}}(以及CollectionView它的力量)起作用的.
在内部,CollectionView使用称为数组观察者的东西.数组观察者可以让你的时候都用做订阅到一个数组,其中突变Ember.Array的突变方法(replace,pushObject,popObject等)阵列观察员API 这里描述.
这意味着,如果您将一个新对象推入一个集合视图,它将在DOM中插入一个新元素,并将其余元素保留在原位.
但是,在您发布的示例中,数组未被变异 - 您Array每次添加或删除新项目时都会创建一个全新的对象.绑定同步时,它会用新数组替换旧数组.To {{#each}},这与删除所有元素然后重新添加它们没有什么不同.
该问题的解决方案是使用单个数组,而不是每次更改时返回不同数组对象的计算属性.您可以在"联系人"应用中找到有关如何执行此操作的示例.
显然这是一个非常常见的模式,我们想添加某种过滤,默认情况下做正确的事情Ember.ArrayController.
| 归档时间： |
|
| 查看次数： |
2007 次 |
| 最近记录： |