javascript - AngularJS:差异化 REST 更新以避免闪烁？

Question

我有一个 Device 对象数组，它是使用 $resource 从 REST 服务器定期获取的。每当发生这种情况时，UI 就会“重新加载”，这意味着该设备数组的 ng-repeat 会再次执行。 DOM 更新很烦人，因为它破坏了当前用户与设备的交互。相反，我希望新获取的 Device 数组仅在内容发生更改的情况下更新现有数组。因此，如果我得到一个新的 Device 数组，并且 10 个设备中的一个仅发生名称更改，则只有该设备的该名称的单个数据绑定(bind)才会引起 DOM 更新。

我找不到执行此操作的方法。因为这对我来说似乎是一个常见问题，所以我想在编写自己的“mergeUpdate”方法之前先问一下，该方法基本上只是执行深度比较替换操作，并且只将内容写入实际存在的现有绑定(bind)中服务器端已更改。

请注意，每个设备都由一个 id 唯一标识，因此该算法完全可行。如果没有这个 id 字段，它将无法工作(可能是 AngularJS 没有提供通用方法的原因)。

实际上，angular.equals是一个部分解决方案。现在我想要的东西至少也可以传输修改后的属性，而不会使整个数组无效。

谢谢!

Answer 1

您正在寻找的是 ngrepeat 的“track by”。就你而言，

<div ng-repeat="item in items track by item.id"></div>

这样，ngrepeat 将跟踪现有项目而不重新渲染它们。合并逻辑是 ngrepeat 的内部逻辑。