firebase - 如何在聚合物 dom-repeat 中创建一个简单的范围

Question

我正在寻找一种在dom-repeat. 在下面的示例中，我有一个userIds（例如：）列表[12,34,45]。我想遍历每个元素并从 firebase 数据库中检索用户对象。最后，我想打印用户名。

我的问题：模板内部没有创建范围。因此，该{{user}}对象将始终被覆盖，并且打印件都将显示相同的用户名。

当前解决方案：创建一个以 auserId作为参数的新 webcomponent（聚合物元素）。然后元素本身将使用<firebase-document>并打印用户名。

<template is="dom-repeat" items="[[userIds]]">
    <firebase-document path="/users/[[userId]]" data="{{user}}"></firebase-document>
    User's name is [[user.name]]
</template>

Answer 1

您可以将每次迭代的输出绑定到迭代器变量（由<dom-repeat>.asproperty指定，默认为“item”），但该变量必须是一个对象。

1. 将元素 (in) 包装userIds成对象：

   <template is="dom-repeat" items="[[_wrap(userIds)]]">...</template>
   
   // in Polymer element
   _wrap(userIds) {
     return userIds.map(userId => ({userId}));
   }
   

2. 在模板中引用新包装的元素：

   <firebase-document path="/users/[[item.userId]]" ...>
   

3. item使用大括号将输出附加到迭代器变量 中：

   <firebase-document data="{{item.user}}" ...>
   

4. 更新您对输出的使用以引用迭代器变量：

   <div>User's name is [[item.user.name]]</div>
   

最终代码应该与此类似：

<template is="dom-repeat" items="[[_wrap(userIds)]]">
  <firebase-document path="/users/[[item.userId]]" data="{{item.user}}"></firebase-document>
  <div>User's name is [[item.user.name]]</div>
</template>

演示

Answer 2

您可以检索类似于以下代码的用户名作为连接数据库async任务。

var users= [];
var db = firebase.database();
arr.forEach( (uid, inx )=>{                                                                                
    db.ref('users/'+ uid).once('value', snapshot=>{                                                                                                         
    if(snapshot.exists()) {                                                                                                                           
        users.push(snapshot.val().name);                                                                                                                              
    }
  if (inx == arr.length-1) { this.set('users', users) } // in order to list at dom-repeat                                                                                                                                                                                                                                                                                   
});