聚合物重复模板双向数据绑定

Polymer repeat template bidirectional data binding

本文关键字：数据绑定 聚合物      更新时间：2023-09-26

我正在尝试构建一个WebComponent，您可以在其中使用Polymer javascript框架编辑数组中的项目。模型到 DOM 绑定工作正常，但 DOM 到 模型不能 - 简化示例：

<polymer-element name="rep-test">
    <template>
        <template repeat="{{item in items}}">
            <input type="text" value="{{item}}" placeholder="changes don't work!">
        </template>
        <button on-click="{{add}}">Add</button>
        {{items}}
    </template><script>
        Polymer({
            ready: function() { this.items = [] },
            add: function() { this.items.push('') },
            itemsChanged: function() { console.log(this.items) } // debug
        })
    </script>
</polymer-element>
<rep-test></rep-test>

items正确显示在input元素中，但是当我更改input中的值时，更改不会反映到模型中（items）。绑定仅在一个方向上工作。

有没有办法使绑定是双向的，以便在DOM中发生更改时，将其复制到模型中？

我已经看过这个可以达到这种效果的待办事项演示，但它是通过与项目更改关联的自定义事件来实现的。这显然有效，但我正在寻找一种更具声明性的方式来使用绑定来做到这一点。

由于数组元素的变化不会反映到itemsChanged，我建议您监听输入更改：

 <!--               ⇓⇓⇓⇓⇓⇓⇓⇓⇓ -->
 <input type="text" on-change="{{ itemChanged }}" 
        value="{{item}}" placeholder="changes don't work!">
 [...]
 <!-- inside script -->
 itemChanged: function(e) {
   console.log(e.path[0].value)
 }

以下是工作示例的链接：http://plnkr.co/edit/sZYHeMuAVB0G1muHhFNK?p=preview

下面是双向绑定的示例： 当您更改输入字段中的值时，模型将更新：

普伦克

Follow data changes:
      <br>
      {{testData.employees[0].firstName}}
      <br>
      {{testData.employees[3].firstName}}
      <br><br>

      <template repeat="{{person in testData.employees}}">
        {{person.firstName}}
        <input type="text"  value="{{person.firstName}}">
        <br>
      </template>

我将引用这篇文章，因为它解释了它如何更好地工作，然后我可以：

"...如果更改数据值，则新值对所有其他实例不可用 - 因为实例变量只是引用字符串的副本。通过使用具有数据属性的对象，如上面的编辑版本所示，并且只读取和分配给该对象的数据属性，而不是覆盖对象本身，更改的值可以在实例之间共享。

相关文章：