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 观察者将不会被调用，因为你需要一个特殊的 * 语法属性更改数组内的通知（参见 this）。

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

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

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

请参阅此 plunker 以供参考。

更新

看起来 Polymer 可能会被 值类型 字符串文字的绑定混淆。因此，一个简单的解决方法是定义一个包含 4 个对象的数组，如下所示 -

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

并且绑定将变为 -

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

看到这个新的plunker。

Polymer 1.1 绑定到数组值

Polymer 1.1 binding to array values

polymer

polymer-1.0

更新