如何解决Polymer应用中Div重复点击导致相册产品重复加载的问题？

我之前在Polymer项目里也碰到过一模一样的重复加载问题，大概率是这两个原因导致的：要么是每次点击相册时，你没清空旧的图片数据就直接追加新数据，要么是dom-repeat没有唯一标识来区分列表项，导致Polymer重复渲染DOM节点。

下面是具体的修复方案：

1. 加载新数据前先清空旧数组 #

检查你的_openAlbumDetailsDialog方法，每次触发时先清空productAlbum.albumProdImages，再赋值新的图片数组，别用push或者concat来追加数据，这样就能避免旧数据和新数据叠加。

示例代码（Polymer 2.x/3.x写法）：

_openAlbumDetailsDialog(e) {
  const targetAlbum = e.currentTarget.value;
  
  // 先清空现有图片数组
  this.set('productAlbum.albumProdImages', []);
  
  // 替换成你实际获取相册图片的逻辑（比如接口请求）
  this._fetchAlbumImages(targetAlbum.productKey)
    .then(newImages => {
      // 直接赋值替换数组，而非追加
      this.set('productAlbum.albumProdImages', newImages);
      // 同步更新相册长度
      this.set('productAlbum.albumProdLength', newImages.length);
    });
}

2. 给dom-repeat添加唯一key属性 #

给dom-repeat加上key属性，指定一个每个图片都唯一的字段（比如imageURL或者图片ID），这样Polymer能准确识别哪些是新节点、哪些是已存在的节点，避免重复创建DOM元素。

修改后的模板代码：

<div class='catelogGrid' on-tap="_openAlbumDetailsDialog" productobj ="[[productAlbum.productKey]]" value="[[productAlbum]]">
  <ul style='margin:0;'>
    <!-- 添加key属性，用图片的唯一标识 -->
    <template is='dom-repeat' items='[[productAlbum.albumProdImages]]' as='productImage' key="[[productImage.imageURL]]">
      <li>
        <img src='[[productImage.imageURL]]'>
      </li>
    </template>
    <li>
      <div name="album" title='View Album Product'>
        <span> + {{productAlbum.albumProdLength}}</span>
      </div>
    </li>
  </ul>
</div>

额外排查点 #

如果上面的方法还没解决问题，检查你的相册详情对话框是不是每次打开都没有销毁，只是隐藏。如果是这种情况，要确保对话框关闭时清空productAlbum.albumProdImages，或者每次打开对话框时重新初始化数据源。

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