Polymer 1.1 绑定到数组值

Question

我有这样的表格

       <div class="warranty-part">
        <paper-input maxlength="4" name="warranty[0]" no-label-float label="1111" value="{{warranty0::input}}"></paper-input>
      </div>
      <div class="warranty-part">
        <paper-input maxlength="4" name="warranty[1]" no-label-float label="1111" value="{{warranty1::input}}"></paper-input>
      </div>
      <div class="warranty-part">
        <paper-input maxlength="4" name="warranty[2]" no-label-float label="1111" value="{{warranty2::input}}"></paper-input>
      </div>
      <div class="warranty-part">
        <paper-input maxlength="4" name="warranty[3]" no-label-float label="1111" value="{{warranty3::input}}"></paper-input>
      </div>

有四个不同的字段。这些输入值中的每一个都绑定到一个定义为...的属性...

   properties: {

    warranty0: {
      type: String,
      observer: 'onWarrantyChange0'
    },

     warranty1: {
      type: String,
      observer: 'onWarrantyChange1'
    },

     warranty2: {
      type: String,
      observer: 'onWarrantyChange2'
    },

     warranty3: {
      type: String,
      observer: 'onWarrantyChange3'
    }
  }

这行得通...但是更整洁的是能够绑定到每个字段的数组值以整理内容。

喜欢

properties: {

    warranty: {
      type: Array,
      value: ['','','',''],
      observer: 'onWarrantyChange'
    }
  }

但我只是不知道如何用聚合物绑定到数组的索引。通过阅读文档，我得到的印象是像这样绑定到输入值会起作用......

    value="{{warranty.0::input}}"

但事实并非如此。

有什么办法吗？

Answer 1

试试{{warranty.0}}、{{warranty.1}}等。

但是，如果您更新任何paper-input 的value，则不会调用onWarrantyChange 观察者，因为您需要特殊的* 语法来通知数组内的属性更改（请参阅@987654321 @)。

properties: {
  warranty: {
    type: Array,
    value: ['111','222','333','444']
  }
},

observers: ['onWarrantyChange(warranty.*)'],

onWarrantyChange: function (changedWarranty) {
  console.log(changedWarranty);
}

请参阅此plunker 以供参考。

---

更新

看起来 Polymer 可能会被 valued type 字符串文字的绑定混淆。所以一个简单的解决方法是定义一个包含 4 个对象的数组 -

value: [ { value: '' }, { value: '' }, { value: '' }, { value: '' } ]

绑定会变成-

value="{{warranty.0.value}}"、value="{{warranty.1.value}}"等。

查看这个新的plunker。