Как создать простую область применения в полимерном дом-повторе

Question

Как создать простую область применения в полимерном дом-повторе

Я ищу простой способ создать область внутри dom-repeat, В приведенном ниже примере у меня есть список userIds (Например: [12,34,45]). Я хочу пройтись по каждому элементу и извлечь объект пользователя из базы данных firebase. Наконец, я хочу напечатать имя пользователя.

Моя проблема: внутри шаблона не создается область видимости. Следовательно {{user}} Объект всегда будет перезаписан, и на всех отпечатках будет отображаться одно и то же имя пользователя.

Текущее решение: создайте новый веб-компонент (полимерный элемент), который занимает userId в качестве аргумента. Сам элемент будет затем использовать <firebase-document> и печатает имя пользователя.

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

1

firebase firebase-realtime-database scope polymer dom-repeat

Источник

user693687 22 янв '18 в 14:37

2 ответа

Другие вопросы по тегам firebase firebase-realtime-database scope polymer dom-repeat

user5347610 22 янв '18 в 15:30 2018-01-22 15:30 · Answer 1 · 2018-01-22 15:30

Вы можете получить имя пользователя, похожее на приведенное ниже, при подключении к базе данных. 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                                                                                                                                                                                                                                                                                   
});

user6277151 23 янв '18 в 21:53 2018-01-23 21:53 · Answer 2 · 2018-01-23 21:53

Вы можете связать выходные данные каждой итерации с переменной итератора (указанной <dom-repeat>.as свойство(по умолчанию это "элемент"), но переменная должна быть объектом.

Оберните элементы (в userIds) в объекты:

<template is="dom-repeat" items="[[_wrap(userIds)]]">...</template>

// in Polymer element
_wrap(userIds) {
  return userIds.map(userId => ({userId}));
}

Ссылка на этот недавно обернутый элемент в шаблоне:
```
<firebase-document path="/users/[[item.userId]]" ...>
```
Присоедините вывод к переменной итератора, item, используя фигурные скобки:
```
<firebase-document data="{{item.user}}" ...>
```
Обновите свое использование вывода для ссылки на переменную итератора:
```
<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>

демонстрация