Object Firebase推送ID和聚合dom重复-如何保持与子属性的双向数据绑定?

Object Firebase推送ID和聚合dom重复-如何保持与子属性的双向数据绑定?,object,firebase,data-binding,polymer,polymerfire,Object,Firebase,Data Binding,Polymer,Polymerfire,我在以下设置中使用Firebase和聚合物: Firebase数据 如您所见,有多个用户具有他们的用户id,下面是一个列表卡集。这基本上是一个数组,但存储为我想要使用的对象firebase推送id,因为这可能会成为协作。 聚合物代码 对于Polymer,我使用dom repeat来迭代项目(只要我使用still数组,它就工作得很好) <template is="dom-repeat" items="{{dataCardSet.card-items}}"> &l

我在以下设置中使用Firebase和聚合物:

Firebase数据

如您所见,有多个用户具有他们的用户id,下面是一个列表卡集。这基本上是一个数组,但存储为我想要使用的对象
firebase推送id
,因为这可能会成为协作。

聚合物代码

对于Polymer,我使用dom repeat来迭代项目(只要我使用still数组,它就工作得很好)

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

问题

众所周知,
dom repeat
需要一个数组,但Firebase在我使用推送ID时给了我一个对象。使用数组并将其存储到Firebase不是一个选项(例如[0:abc,1:def])。 此外,我需要保持双向数据绑定

尝试过的解决方案

(一)

(二)

(三)

如前所述,(1)和(2)没有选项。(3)实际起作用,但使用此解决方案,如果我只更新一个子属性,它将更新对象中的所有子属性。这将迫使dom repeat重新初始化元素。我使用的是
元素,因此,它在按下一个键后失去焦点

(4) 另外,使用(1)order(2)然后手动绑定到子属性是不可能的,因为无法使用使用动态索引(例如{dataCardSet.card items.index})的绑定

(5) 我还尝试在
dom repeat
中使用
array selector
,但存在同样的问题,即我无法动态创建数据绑定

需要支持

我需要一种方法来保持双向数据绑定,保持dom重复并使用推送ID。 事实上,我很惊讶也很失望,因为Firebase做了广告,但没有将聚合物框架作为标准

此外,Rob Dodson的这段代码给人的印象是,这将很容易工作,但看看代码,它使用的是一个数组和推送ID,如视频中所示


谢谢你的帮助!

这就是我在类似项目中解决问题的方法

使用
firebase查询控制阵列

使用
firebase文档控制对象

示例代码

模板is=“dom repeat”
中,使用属性
as=“item”
绑定到
项的值。$key
。将
路径=“{{item.$key}}
添加到
el卡编辑器元素

<template is="dom-repeat" items="{{dataCardSet.card-items}}" as="item">
 <el-card-editor card-item="{{item}}" path="{{item.$key}}></el-card-editor>
</template>
关于聚合物团队


别忘了,他们是一个小团队,非常努力地发布polymer 2.0,并提供了新的演示和教程。这些都应该在2017年第一季度提供。

谢谢Joel。我不知道polymer团队的规模,谢谢你提供的信息:)关于您的解决方案:如果我正确理解您的解决方案,我将从Firebase加载几次(针对每张卡),因为
firebase文档
el卡编辑器
中,对吗?我以前也有过类似的方法,而且性能非常慢。想象一下,一组100张卡,这意味着对firebase有100个请求。我的项目中有相同的设计,加载数组和列表需要18毫秒,你可以延迟批量加载一个大型lFirebase建议避免嵌套数据以获得最佳性能,请查看他们的网站,他们那里有很棒的教程。
<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>