javascript - 在这种情况下，当我更新 arrayController 内容时，将重新渲染 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

现在这会导致从 100 删除li然后DOM将 150 插入li到DOM吗？在移动浏览器（iphone）中最大化性能的最佳方法是什么？

---

在我的场景中，我在 5 个不同的选项卡中显示了 5 种类型的用户，并且我为每种类型保留一个控制器，并将整个内容保存在 DOM 中，并在更改的选项卡上显示/隐藏。

所以我有 500 个li在DOM其中显示/隐藏。现在想一些方法来使用单个usersController并以某种方式优化DOM更新。

Answer 1

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

在这里查看更多信息。创作者 Erik Bryn 的介绍性演讲也提供了非常丰富的信息。

希望能帮助到你。