Polymer 中数组元素的绑定 sub 属性

Question

我有简单的 iron-selector 和 dom-repeat。当我更改所选项目的子属性时 dom-repeat 不会刷新，但数组项目会更新。

<dom-module id="my-element">
  <template>
    <iron-selector selected="{{selected}}" attr-for-selected="v">
      <template is="dom-repeat" items="{{array}}">
        <div v="{{item}}">{{item.summary}}</div>
      </template>
    </iron-selector>
    <paper-input label="summary" value="{{selected.summary}}"></paper-input>
  </template>
</dom-module>

Polymer({
  is: "my-element",
  properties: {
    array: {
      type: Array,
      value: () => {
        return [{summary: '1'}, {summary: '2'}, {summary: '3'}]
      }
    }
  },
});

jsfiddle

我不明白如何绑定所选元素的子属性和 dom-重复项。

Answer 1

array-selector 应该可以解决您的绑定问题。

<dom-module id="employee-list">

  <template>

    <h2> Employee list: </h2>
    <template is="dom-repeat" id="employeeList" items="{{employees}}">
      <div>
        <button on-click="toggleSelection">Select</button> 
        <span>{{item.first}} {{item.last}} </span>     
      </div>
    </template>

    <array-selector id="selector" items="{{employees}}" selected="{{selected}}">
    </array-selector>

    <h3> Change {{selected.last}} first name: </h3>
    <paper-input value="{{selected.first}}"></paper-input>

  </template>

</dom-module>

<script>
  Polymer({
    is: 'employee-list',
    ready: function() {
      this.employees = [
        {first: 'Bob', last: 'Smith'},
        {first: 'Sally', last: 'Johnson'},
      ];
    },
    toggleSelection: function(e) {
      var item = this.$.employeeList.itemForElement(e.target);
      this.$.selector.select(item);
    }
  });
</script>

https://jsfiddle.net/aek6py7s/

Polymer 中数组元素的绑定 sub 属性

Binding sub property of array element in Polymer

arrays

data-binding

polymer-1.0