1

我在以下设置中使用 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)单向数据绑定 - 备选方案 1

(2)单向数据绑定 - 备选方案 2

(3)双向数据绑定

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

(4) 也无法使用 (1) oder (2) 然后手动绑定到子属性，因为无法使用动态索引（例如 {{dataCardSet.card-items.index}}

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

需要支持

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

Rob Dodson 的这个Polycast和GitHub 上的代码给人的印象是这很容易工作，但是看看代码，它使用了一个数组和 push-ID，如视频中所示。

谢谢你的帮助！

4

1 回答 1

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-editorelement 使用 from 的值{{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 年第一季度全部可用。

于 2017-01-04T04:31:04.603 回答