CODEWITHSUNDEEP
polymer
fozziethebeat
fozziethebeat

Reputation: 1180

How to access and modify dom-repeat children dynamically

Using Polymer 1.0, suppose I have some elements nested in a dom-repeat element, such as the following:

<div id="stuffDiv">
  <template is="dom-repeat" items="{{myItems}}">
    <iron-icon icon="star" on-tap="onTap"></iron-icon>
  </template>
</div>

I'd like to change an attribute, say class, on all the iron-icons within the "onTap" method. So I've figured out the following implementation

onTap: function(e) {
  var index = e.model.index;
  var stuffIcons = Polymer.dom(this.$.stuffDiv).querySelectorAll('iron-icon');
  for (var i = 0; i <= index; ++i) {
    this.toggleClass('magicClass', true, stuffIcons[i]);
  }
  for (var i = index+1; i < stuffIcons.length; ++i) {
    this.toggleClass('magicClass', false, stuffIcons[i]);
  }
},

This works, but feels very clunky. Is there a better approach that's not well documented? I don't see anything obvious on Polymer 1.0's resources.

Note, i've also tried having iron-icon's class depend on an item value and dynamically update that in onTap using this.set(...), however that doesn't work either, the class values I set get obliterated for reasons unknown to me.

Upvotes: 2

Views: 1870

Answers (1)

user1135469
user1135469

Reputation: 1020

You could look at binding the magicClass class.

Is this the result you were after?

<div id="stuffDiv">
  <template is="dom-repeat" items="{{myItems}}">
    <iron-icon icon="star" on-tap="onTap" class$="{{getIconClass(index, stopTheMagicIndex)}}">Star</iron-icon>
  </template>
</div>

And then...

properties: {
    myItems: {
      type: Array,
      value: function() {
        return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      }
    },
    stopTheMagicIndex: Number
  },
  onTap: function(e) {
    this.set('stopTheMagicIndex', e.model.index);
  },
  getIconClass: function(index) {
    if (index <= this.stopTheMagicIndex) return 'magicClass';
    return '';
  }

Upvotes: 3

Related Questions