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以供参考。

更新

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

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

绑定将成为 -

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

查看此新plunker。

Polymer 1.1绑定到数组值

1 个答案:

更新