How to access and modify dom-repeat children dynamically - polymer

Question

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.

Answer 1

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 '';
}