如何动态访问和修改dom-repeat子级

Question

使用Polymer 1.0，假设我有一些嵌套在dom-repeat元素中的元素，如下所示：

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

我想要更改"onTap“方法中所有铁图标的属性，比如类。所以我已经弄清楚了下面的实现

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]);
  }
},

这是可行的，但感觉很笨拙。有没有更好的方法，但没有很好的记录？我在Polymer 1.0的资源上看不到任何明显的东西。

注意，我也尝试过让iron-icon的类依赖于一个项值，并使用this.set(...)在onTap中动态更新它，但是这也不起作用，我设置的类值由于未知的原因而被删除。

Answer 1

您可以考虑绑定magicClass类。

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>

然后..。

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