Firebase Push ID и Polymer dom-repeat — как сохранить двустороннюю привязку данных к подсвойствам?

Я использую Firebase и Polymer в следующей настройке:

Данные Firebase

Как видите, есть несколько пользователей с их user-id и под списком наборов карточек. В основном это массив, но он хранится как объект, так как я хочу использовать firebase push id, так как это может стать совместным. введите здесь описание изображения

Код полимера

С Polymer я использую dom-repeat для перебора элементов (что отлично работало, пока я использовал неподвижные массивы.

    <template is="dom-repeat" items="{{dataCardSet.card-items}}">
       <el-card-editor card-item="{{item}}"></el-card-editor>
    </template>

Проблема

Как известно, dom-repeat нужен массив, но Firebase дает мне объект, поскольку я использую push-id. Использование массива и сохранение его в Firebase не вариант (например, [0: abc, 1: def]). Кроме того, мне нужно сохранить двустороннюю привязку данных

Испробованные решения

(1) Односторонняя привязка данных - Альтернатива 1

(2) Односторонняя привязка данных — вариант 2

(3) Двусторонняя привязка данных

Как сказано, (1) и (2) не являются вариантами. (3) на самом деле работает, но при использовании этого решения, если я обновляю только одно подсвойство, оно обновляет все подсвойства в объекте. Это заставляет dom-repeat повторно инициализировать элементы. Я использую элемент <paper-input>, и поэтому он теряет фокус после нажатия одной клавиши.

(4) Также использование (1) или (2) и последующая привязка вручную к подсвойствам невозможна, так как нет возможности использовать привязку с использованием динамического индекса (например, {{dataCardSet.card-items.index}}

(5) Я также пытался использовать array-selector в dom-repeat, имея ту же проблему, что я не могу динамически создавать привязку данных.

Требуется поддержка

Мне нужен способ сохранить двустороннюю привязку данных, сохраняя dom-repeat и используя push-ID. Я на самом деле удивлен и разочарован, поскольку Firebase рекламируется, но не работает с фреймворком Polymer в качестве стандарта.

Также это Polycast Роба Додсона с кодом на GitHub создает впечатление, что это будет легко работать, но, глядя на код, он использует массив и push-ID. как показано на видео.

Спасибо за вашу помощь!


person gerd hübner    schedule 02.01.2017    source источник


Ответы (1)


Вот как я решил проблему в подобном проекте.

Управляйте массивом с помощью firebase-query

Управляйте объектом с помощью firebase-document

Пример кода

Внутри template is="dom-repeat" используйте атрибут as="item" для привязки к значению item.$key. Добавьте path="{{item.$key}} к el-card-editor element.

<template is="dom-repeat" items="{{dataCardSet.card-items}}" as="item">
 <el-card-editor card-item="{{item}}" path="{{item.$key}}></el-card-editor>
</template>

el-card-editor по значению из {{item.$key}} построить путь к объекту для элемента firebase-document.

пример пути: users/user.uid/card-sets/card-sets.key/card-items/card-items.id

<firebase-document path="/build the path here" data="data" ></firebase-document>
<div class="card">
  <h1>{{data.title}}</h1>
  <paper-input label="item" value="{{data.item}}"></paper-input>
</div>

О команде Polymer

Давайте не будем забывать, что это небольшая команда, очень усердно работающая над публикацией полимера 2.0 с новой демонстрацией и учебными пособиями. Все это должно быть доступно в течение первого квартала 2017 года.

person JoelCode    schedule 04.01.2017
comment
Спасибо, Джоэл. Не знал о размере команды Polymer, спасибо за информацию :) О вашем решении: Если я правильно понял ваше решение, я бы загружал несколько раз из Firebase (для каждой карты), так как firebase-document находится внутри el-card-editor, верно? У меня был аналогичный подход раньше, и он был очень медленным в производительности. Представьте себе набор из 100 карточек, это будет означать 100 запросов к Firebase. - person gerd hübner; 06.01.2017
comment
У меня такой же дизайн в моем проекте, загрузка массива и списка занимает 18 мс, вы можете лениво загружать результаты в пакетном режиме для большого списка. (Бесконечная прокрутка). Firebase рекомендует избегать вложения данных для оптимальной производительности, взгляните на их веб-сайт, там есть отличное руководство. - person JoelCode; 06.01.2017