Question

我正在尝试构建一个 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发生变化时，它会被复制到模型中？

我已经看到这个todo demo实现了这种效果，但它与项目更改相关的自定义事件也是如此。这显然有效，但我正在寻找一种更具有声明性方式来实现绑定。

Answer 1

由于数组元素的更改未反映到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

Answer 2

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

Plunk

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>

我会参考this post，因为它解释了它如何更好地工作：

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

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

2 个答案: