Firebase Push ID et Polymer dom-repeat - Comment conserver la liaison bidirectionnelle des données aux sous-propriétés?

Question

J'utilise Firebase et du polymère dans la mise en place suivante:

Firebase-Data

Comme vous pouvez le voir, il y a plusieurs utilisateurs avec leur ID utilisateur et ci-dessous une liste carte-ensembles. Ceci est essentiellement un tableau, mais stocké en tant qu'objet que je veux utiliser firebase push id car cela pourrait devenir collaboratif.

polymère code

Avec polymère J'utilise dom-repeat itérer sur les objets (Wich fonctionnait très bien tant que j'utilisais des tableaux fixes.

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

Problème

Comme connu, dom-repeat a besoin d'un tableau, mais Firebase me donne un objet que j'utilise le push-ids. Utiliser un tableau et le stocker dans Firebase n'est pas une option (par exemple [0: abc, 1: def]). Aussi, je besoin de conserver les données de liaison dans les deux sens

solutions Essayé

(1) One way data binding - Alternative 1

(2) One way data binding - Alternative 2

(3) Two way data binding

Comme indiqué, (1) et (2) ne sont pas des options. (3) fonctionne réellement, mais en utilisant cette solution, si je ne mets à jour qu'une seule sous-propriété, elle met à jour toutes les sous-propriétés de l'objet. Cela force dom-repeat à ré-initialiser les éléments. J'utilise un élément <paper-input> et ainsi, il perd son focus après avoir appuyé sur une touche. (4) Il n'est pas non plus possible d'utiliser (1) oder (2) puis de se lier manuellement aux sous-propriétés, car il est impossible d'utiliser la liaison à l'aide d'un index dynamique (par exemple {{dataCardSet.card-items .index}}

(5) J'ai aussi essayé d'utiliser array-selector dans le dom-repeat, ayant la même question, que je ne peux pas créer des données de liaison dynamique.

soutien nécessaire

je besoin d'un façon de maintenir la liaison de données bidirectionnelle en maintenant dom-repeat et en utilisant les push-IDs.Je suis réellement surpris et déçu, car Firebase est annoncé mais ne fonctionne pas avec Polymer framework comme standard.

Aussi ce Polycast par Rob Dodson avec le code sur GitHub donne l'impression que cela fonctionnerait facilement, mais en regardant le code, il utilise un tableau et push-IDs comme indiqué dans la vidéo.

Merci pour votre aide!

Answer 1

Voici comment j'ai résolu le problème dans un projet similaire.

contrôle du réseau avec firebase-query

contrôler l'objet avec firebase-document

Exemple de code

l'intérieur de la template is="dom-repeat", utiliser l'attribut as="item" à se lier à la valeur de item.$key. Ajoutez path="{{item.$key}} au 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> 

élément el-card-editor en utilisant la valeur de {{item.$key}} construire le chemin d'accès à l'objet pour l'élément firebase-document.

échantillon de chemin

: utilisateurs/user.uid/carte-jeux/cartes sets.key/carte/articles 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> 

A propos de l'équipe polymère

Entre Nous n'oublions pas qu'il s'agit d'une petite équipe qui travaille très dur pour publier le polymère 2.0 avec une nouvelle démo et des tutoriels. Tout devrait être disponible durant le premier trimestre de 2017.