如何在Polymer的dom-repeat中创建独立作用域避免数据覆盖？

我太懂这种踩坑的感觉了！你遇到的核心问题就是dom-repeat模板内没有为每个循环项创建独立的数据作用域，所有<firebase-document>都绑定到同一个user属性上，所以每次请求回来的用户数据都会把之前的覆盖掉，最后所有条目自然都显示最后那个用户的名字。

最靠谱的解决方案：用独立子组件隔离作用域 #

你提到的创建新Web组件的思路完全正确，每个子组件实例会拥有自己独立的属性上下文，完美解决数据覆盖问题。下面是具体实现步骤：

1. 创建用户展示子组件

新建一个user-display.html文件，实现这个子组件：

<dom-module id="user-display">
  <template>
    <!-- 每个组件实例自己的firebase-document，绑定到自身的user属性 -->
    <firebase-document path="/users/[[userId]]" data="{{user}}"></firebase-document>
    <span>User's name is [[user.name]]</span>
  </template>
  <script>
    Polymer({
      is: 'user-display',
      properties: {
        // 接收父组件传入的userId
        userId: {
          type: Number,
          required: true
        },
        // 组件内部独立的user对象，不会和其他实例共享
        user: {
          type: Object
        }
      }
    });
  </script>
</dom-module>

2. 修改原组件的dom-repeat代码

在你的主组件里引入这个子组件，然后把原来的模板改成调用子组件：

<!-- 先引入子组件 -->
<link rel="import" href="user-display.html">

<template is="dom-repeat" items="[[userIds]]">
  <!-- 每个循环项对应一个子组件实例，传入当前item作为userId -->
  <user-display user-id="[[item]]"></user-display>
</template>

为什么这样能解决问题？ #

每个<user-display>实例都有自己独立的user属性，当<firebase-document>拉取到对应用户的数据时，只会更新当前组件实例的user，不会影响其他子组件。这样每个循环项都能正确显示对应用户的名字，再也不会出现覆盖的情况了。

内容的提问来源于stack exchange，提问作者Jürgen Brandstetter