聚合物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观察者，因为您需要一个特殊的*语法来通知数组中的属性更改(参见这)。

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

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

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

请参阅此柱塞以供参考。

更新

看起来聚合物可能会被值类型字符串文字的绑定所混淆。所以一个简单的解决办法是定义一个数组，其中包含4个对象，如下所示-

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

这些绑定就会变成-

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

看看这个新的柱塞。