Object Firebase推送ID和聚合dom重复-如何保持与子属性的双向数据绑定?
我在以下设置中使用Firebase和聚合物: Firebase数据 如您所见,有多个用户具有他们的用户id,下面是一个列表卡集。这基本上是一个数组,但存储为我想要使用的对象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推送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>