javascript - 在这种情况下，当我更新 arrayController 内容时，ember 会重新渲染 DOM 中的所有 li

Question

{{#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 更新。

Answer 1

如果您有很多列表项，我建议使用 ember-list-view ，它重用 DOM 元素，而不是创建新元素并销毁其他元素。

看看here了解更多信息。另外this introductory talk作者 Erik Bryn 的内容非常丰富。

希望有帮助。