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

需要一个数组，但是当我使用push-ids时Firebase给了我一个对象。使用数组并将其存储到 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 并使用推送 ID。 事实上，我感到惊讶和失望，因为 Firebase 做了广告，但后来却没有使用 Polymer 框架作为标准。

此外，Rob Dodson 的 Polycast 以及 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>

关于聚合物团队

我们不要忘记，他们是一个小团队，正在努力发布带有新演示和教程的聚合物 2.0。应该会在 2017 年第一季度全部推出。