Firebase Push ID and Polymer dom-repeat - How to keep two way data binding to sub-properties?

Question

I am using Firebase and Polymer in the following set-up:

Firebase-Data

As you can see, there are several users with their user-id and below a list card-sets. This is basically an array, but stored as object as I want to use firebase push id as this might become collaborative.

Polymer Code

With Polymer I am using dom-repeat to iterate over the items (wich worked great as long as I was using still arrays.

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

Problem

As known, dom-repeat needs an Array, but Firebase gives me an Object as I am using the push-ids. Using an Array and store it to Firebase it not an option (e.g. [0: abc, 1: def]). Also, I need to keep two-way data-binding

Tried solutions

(1) One way data binding - Alternative 1

(2) One way data binding - Alternative 2

(3) Two way data binding

As said, (1) and (2) are no options. (3) is actually working, but using this solutions, if I update only one sub-property, it updates all sub-properties in the object. This forces dom-repeat to re-initialize the elements. I am using a <paper-input> element and thus, it loses its focus after pressing one key.

(4) Also using (1) oder (2) and then binding manually to the sub-properties is not possible, as there is no way to use binding using a dynamic index (e.g. {{dataCardSet.card-items.index}}

(5) I also tried to use array-selector within the dom-repeat, having the same issue, that I cannot create data-binding dynamically.

Support needed

I need a way to keep two-way data binding keeping dom-repeat and using push-IDs. I am actually surprised and disappointed, as Firebase is advertised but then not working with Polymer framework as a standard.

Also this Polycast by Rob Dodson with the code on GitHub gives the impression that this would be easily working, but looking at the code, it is using an array and push-IDs as shown in the video.

Thanks for your help!

Answer 1

This is how I solved the issue in a similar project.

Control the array with firebase-query

Control the object with firebase-document

Sample Code

Inside the template is="dom-repeat", use the attribute as="item"to bind to the value of item.$key. Add path="{{item.$key}} to the 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 element using the value from {{item.$key}} construct the path to the object for the element firebase-document.

path sample: 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>

About the Polymer Team

Let's not forget that they are a small team working really hard to publish polymer 2.0 with new demo and tutorials. It should all be available during the first quarter of 2017.