Polymer：强制dom-repeat重新计算所有项的索引

嘿，我完全懂你遇到的这个坑——用iron-scroll-threshold加载更多数据时，dom-repeat居然没重新计算所有项的索引，导致dom-if的显示逻辑直接失效。其实这是dom-repeat的性能优化机制在搞鬼：当你直接往原数组里push新数据时，它只会渲染新增的项，不会去重新计算已有项的索引；而排序/筛选时你大概率用了filter()或sort()这类返回新数组的方法，所以dom-repeat会自动全量更新索引。

下面给你几个实用的解决办法，按需选就行：

1. 改变数组引用（最简单直接） #

别直接用push修改原数组，而是通过扩展运算符或concat()生成新数组再重新赋值。这样dom-repeat能立刻感知到items的引用变化，自动重新计算所有项的索引：

_handleLowerThreshold() {
  // 假设fetchMoreData()是你的数据加载函数，返回新数据集
  const newData = this.fetchMoreData();
  // 生成新数组并赋值，触发dom-repeat全量更新索引
  this.items = [...this.items, ...newData];
}

这个方法代码简洁，不用操作dom-repeat实例，但要注意：如果列表已经有几千项，全量重新渲染可能会有短暂的性能波动，不过9000条数据的规模，Polymer的优化应该能轻松hold住。

2. 手动调用dom-repeat的render()方法 #

要是你不想改变数组引用（比如担心全量渲染的性能），可以直接获取dom-repeat的实例，调用它的render()方法强制重新计算索引并更新视图：

先给你的dom-repeat加个ID：

<dom-repeat id="largeList" items="{{items}}">
  <template>
    <dom-if if="{{index > 10}}">
      <!-- 你的列表项内容 -->
    </dom-if>
  </template>
</dom-repeat>

<iron-scroll-threshold on-lower-threshold="_handleLoadMore"></iron-scroll-threshold>

然后在加载更多的回调里调用render()：

_handleLoadMore() {
  // 加载新数据并push到原数组
  this.items.push(...this.fetchMoreData());
  // 强制dom-repeat重新计算所有项的索引，更新dom-if状态
  this.$.largeList.render();
}

render()方法会让dom-repeat重新遍历整个数组，重新计算每个项的index，然后同步更新所有dom-if的判断结果，确保显示逻辑正确。

3. 调用reset()方法（彻底刷新） #

如果上面两种方法都没生效，可以试试dom-repeat的reset()方法——它会重置组件的内部状态（包括索引缓存），然后彻底重新渲染全部项：

_handleLoadMore() {
  this.items.push(...this.fetchMoreData());
  this.$.largeList.reset();
}

这个方法效果最彻底，但会清空现有DOM元素再重新创建，性能消耗比render()大一些，适合极端情况使用。

额外小建议 #

其实你也可以换一种分页思路：不用dom-if基于索引筛选，而是维护一个displayedItems数组，初始只放索引>10的项，加载更多时把新的一批数据（比如接下来20条）添加到displayedItems里，让dom-repeat只渲染这个数组。这样既不会有索引计算的问题，性能也会更好，不过这得看你的具体需求啦。

内容的提问来源于stack exchange，提问作者Hubert