聚合物如何更新筛选阵列 [英] Polymer how to update filtered array

问题描述

我在聚合物滤波DOM重复阵列是这样的：

I have a filtered dom-repeat array in Polymer like this:

<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']。当我点击第二范围，或元素'AHI'的updateItem被触发。该方法 indexForElement 将返回指数= 1 。然而，在行阵列， AHI 的索引 2 。因此，行练得 ['ABC'，'GHI'，'AHI'，'JKL'] 而不是 ['ABC'，'高清'，'GHI'，'JKL']

The problem is in the function updateItem. Because the array is filtered, it will only shows ['abc', 'ahi']. When I click on the second span, or element 'ahi', updateItem is triggered. the method indexForElement will return index=1. However, in the rows array, ahi has index 2. Therefore, rows turn out to be ['abc', 'ghi', 'ahi', 'jkl'] instead of ['abc', 'def', 'ghi', 'jkl']

我如何正确地更新过滤阵列？

How do I update filtered array properly?

推荐答案

，只得到实际的项目的距离，并做一个的indexOf 从原来的列表中。

Instead of getting the index from the filtered list, just get the actual item from it and do an indexOf from the original list.

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

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

这篇关于聚合物如何更新筛选阵列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！