Question

我在Polymer中有一个过滤后的dom-repeat数组，如下所示：

<dom-module id="my-element">
  <template id="template" is="dom-repeat" items="[[rows]]" filter="filter">
    <span on-click="updateItem">[[item]]</span>
  </template>
</dom-module>
<script>
  Polymer({
    is: "my-element",
    ready: function() {
      this.rows = ['abc', 'def', 'ahi', 'jkl'];
    },
    filter: function(item) {
      return item.indexOf('a') > -1;
    },
    updateItem: function(event) {
      var index = this.$.template.indexForElement(event.target);
      this.set('rows.' + index, 'ghi');
    }
  });
</script>

问题出在函数updateItem中。因为数组被过滤，所以它只显示['abc'，'ahi']。当我单击第二个span或元素'ahi'时，会触发updateItem。方法indexForElement将返回index=1。但是，在rows数组中，ahi具有索引2。因此，rows原来是['abc', 'ghi', 'ahi', 'jkl']而不是['abc', 'def', 'ghi', 'jkl']

如何正确更新已过滤的数组？

Answer 1

不是从过滤后的列表中获取索引，只需从中获取实际的项，然后从原始列表中执行indexOf。

var item = this.$.template.itemForElement(event.target);
var index = this.rows.indexOf(item);

this.set('rows.' + index, 'ghi');

Polymer如何更新过滤后的数组

1 个答案: