{{#each App.usersController}}
<li>
<span>{{name}}</span> ,
<span>{{age}}</span>,
<span>{{phone}}</span>,
<span>{{address}}</span>
</li>
{{/each}}
考虑 usersController
是一个 ArrayController
并且有 100 个用户。
现在我将这 100 个用户更改为另外 150 个用户,
App.usersController.set('content', newUsers);//newUsers.length = 150
现在这会导致从 DOM
中删除 100 li
,然后将 150 li
插入到 DOM
?为了最大限度地提高移动浏览器(iPhone)的性能,最佳方法是什么?
在我的场景中,我有 5 种类型的用户显示在 5 个不同的选项卡中,我为每种类型保留一个 Controller ,并将整个内容保留在 DOM 中,只在更改选项卡时显示/隐藏。
所以我在 DOM
中显示/隐藏了 500 个 li
。现在正在考虑某种方法来使用单个 usersController
并以某种方式优化 DOM
更新。
最佳答案
如果您有很多列表项,我建议使用 ember-list-view ,它重用 DOM 元素,而不是创建新元素并销毁其他元素。
看看here了解更多信息。另外this introductory talk作者 Erik Bryn 的内容非常丰富。
希望有帮助。
关于javascript - 在这种情况下,当我更新 arrayController 内容时,ember 会重新渲染 DOM 中的所有 li,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17506064/