CODEWITHSUNDEEP
javascriptpolymer
streetturtle
streetturtle

Reputation: 5850

Polymer - start index for dom-repeat

I am displaying two arrays - one after another as unordered list (ul) using Polymer's dom-repeat:

<ul>
  <template is="dom-repeat" items="{{array1}}" index-as="position_id">
    <li on-tap="select1" class$="{{_selectedStyle(selectedId, position_id)}}">
      {{item.fileName}}
    </li>
  </template>
  <template is="dom-repeat" items="{{array2}}" index-as="position_id">
    <li on-tap="select2" class$="{{_selectedStyle(selectedId, position_id}}">
      {{item.fileName}}
    </li>
  </template>
</ul>
...
_selectedStyle: function (selectedPosId, posId) {
  if (selectedPosId && posId){
    return (selectedPosId === posId) ? "selected" : "";
  }
}

I want to apply class on the selected item, but obviously it doesn't work properly because for both dom-repeat templates selectedId and position_id are the same (both starts from 0). Ideally would be to have offset on the second dom-repeat template, but it seems this feature is not supported. What would be the best workaround in this case?

Upvotes: 1

Views: 718

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657128

Just pass also the offset (length of array1) and add them in _selectedStyle() (see comments below):

<li on-tap="select2" class$="{{_selectedStyle(selectedId, position_id, array1.length}}">
  {{item.fileName}}
</li>

Upvotes: 2

Related Questions