javascript - 聚合物 1.0 : Best practice for managing a simple list of items

Question

我创建了一个用于显示和编辑人员列表的简单原型(prototype)。原型(prototype)可以在这里找到:JSBin .

如您所见，当按下“保存”时，项目将使用 array mutation API 写回到数组中。 .我不确定这是否真的需要，因为对象总是通过引用分配。

但是，“保存”按钮不会更新列表中的项目。 但是当您再次编辑它时，新更改的值会以某种方式保留在表单中。我猜变化确实发生在内存中，但 dom-repeat 不会触发列表的新呈现。

我还在 dom-repeat 上设置了 observe 属性，但似乎没有任何区别。

我的问题是双重的:

1. 需要更改什么以便在保存项目时更新列表。
2. 是否有更好的方法(常见的最佳实践)来管理项目列表(使用双向数据绑定(bind))。

Answer 1

简答:将您的保存功能切换为此

app.save = function(e) {
   app.splice('people', app.selectedIndex, 1, {name: app.selected.name, surname: app.selected.surname});
   app.selectedIndex = -1;
};

长答案:

您需要这样做的原因有点复杂，但它与 dom-repeat 内部的性能优化有关。当 dom-repeat 的数组更新时，它不会简单地删除其所有子节点并重新呈现所有内容，因为这可能会很昂贵。相反，它循环遍历它当前作为子项拥有的所有模板实例，并检查它们的项模型是否已更改。对于每个模板，它都会进行引用相等性检查以查看它们是否是同一对象。如果它们相同，则什么都不做。如果不是，它会重新呈现该模板。

在您的例子中，您将数组与已经存在的相同对象拼接在一起。所以当 dom-repeat 做这个优化检查时，它看到这个项目是和以前一样的对象，什么都不做。但是，如果您创建一个新对象，此检查将失败并且它将重新呈现模板实例......因此，它可以工作。

现在，为什么它不在对象发生变异时更新？答案必须归因于 Polymer 的数据检查是基于“路径通知”，而不是像脏检查这样昂贵的东西。更新属性时，Polymer 会向数据绑定(bind)到该属性的每个子节点触发一个事件。问题是，您的表单没有作为“people”数组中的元素数据绑定(bind)到属性。他们被绑定(bind)到一个不同的属性，'selected'。即使它们由同一个对象支持，属性名称也不同，因此通知路径不匹配； app.selected.name 是当您更改 John Doe 的名字时收到通知的路径，而不是 app.people.0.name，它是 dom-repeat 的路径正在寻找更改通知。

至于问题的第二部分，我建议您尽可能避免双向数据绑定(bind)。它不像 Angular 那样依赖脏检查，因此它不是一个大的性能问题，但它仍然有很多开销。