Firebase Push ID 和 Polymer dom-repeat - 如何保持双向数据绑定到子属性？

Question

我在以下设置中使用 Firebase 和 Polymer：

Firebase-数据

如您所见，有几个用户有他们的用户 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 需要一个数组，但是当我使用推送 ID 时，Firebase 给了我一个对象。使用数组并将其存储到 Firebase 不是一个选项（例如 [0: abc, 1: def]）。另外，我需要保持双向数据绑定

尝试过的解决方案

(1) One way data binding - Alternative 1

(2)

(3)

如前所述，（1）和（2）不是选项。 (3) 实际上有效，但使用此解决方案，如果我只更新一个子属性，它会更新对象中的所有子属性。这会强制 dom-repeat 重新初始化元素。我正在使用 <paper-input> 元素，因此，它在按下一个键后失去了焦点。

(4) 同样使用 (1) 或 (2) 然后手动绑定到子属性是不可能的，因为无法使用动态索引（例如 {{dataCardSet.card-items.index}}

(5) 我也尝试在 dom-repeat 中使用 array-selector，遇到同样的问题，我无法动态创建数据绑定。

需要支持

我需要一种方法来保持双向数据绑定保持 dom-repeat 并使用推送 ID。我实际上感到惊讶和失望，因为 Firebase 被宣传但没有将 Polymer 框架作为标准工作。

另外 Polycast by Rob Dodson with the code on GitHub 给人的印象是这很容易工作，但查看代码，它使用了一个数组和推送 ID，如视频中所示。

感谢您的帮助！

Answer 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 年第一季度全部可用。

Firebase Push ID 和 Polymer dom-repeat - 如何保持双向数据绑定到子属性？

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

data-binding

object

firebase

polymer

polymerfire