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>

我想在＆＃34; onTap＆＃34;中的所有铁图标上更改属性，比如说课程。方法。所以我已经找到了以下实现

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

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

1 个答案: