CODEWITHSUNDEEP
arraysdata-bindingpolymer-1.0
andrey.ladniy
andrey.ladniy

Reputation: 1674

Binding sub property of array element in Polymer

I have simple iron-selector and dom-repeat. When I change sub property of selected item dom-repeat is not refreshed, but item of array is updated.

<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

I can not understand how bind sub-property of selected element and dom-repeat item.

Upvotes: 2

Views: 582

Answers (1)

pomber
pomber

Reputation: 23980

array-selector should solve your binding issues. 

<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/

Upvotes: 1

Related Questions