Polymer 1.0:管理简单项目列表的最佳实践

Polymer 1.0: Best practice for managing a simple list of items

本文关键字：列表 最佳 项目 简单 管理 Polymer      更新时间：2024-01-19

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

正如您所看到的，当按下"Save"时，将使用数组突变API将项写回数组。我不确定这是否真的需要，因为对象总是通过引用来分配的。

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

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

我的问题有两个：

  1. 需要更改哪些内容，以便在保存项目时更新列表
  2. 是否有更好的方法（通用最佳实践）来管理项目列表（使用双向数据绑定）

简短回答：将保存功能切换到此

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会向数据绑定到该属性的每个子节点激发一个事件。问题是，表单不是作为"people"数组中的元素绑定到属性的数据。它们绑定到另一个属性"selected"。即使这些由同一对象支持，但属性名称不同，因此通知路径不匹配；app.selected.name是在更改John Doe的名字时得到通知的路径，而不是app.people.0.name，这是dom repeat查找更改通知的路径。

至于你问题的第二部分，我建议你尽可能避免双向数据绑定。它不像Angular那样依赖脏检查，所以它没有那么大的性能问题，但它仍然有很多开销。

相关文章：