Polymerfire获取列表中每个元素的数据

时间:2016-07-20 17:07:03

标签: firebase firebase-realtime-database firebase-polymer polymerfire

使用与Polymerfire网站上类似的示例,我如何获取每个笔记的信息。

如果我得到一份可用的笔记列表:

<firebase-document
      path="/teams/[[teamid]]/notes"
      data="{{notes}}"
      >
    </firebase-document>

结果将是一个对象

f738hfno3oibr39rhr: true
adfagsg35ugho84hoh: true
... etc

获取这些笔记的数据的可接受方式是什么?

这是我到目前为止所得到的,但是在删除或添加内容时它无效。

<template is="dom-repeat" items="{{notesComputed}}">
                <div>
                    <!-- Get the data needed for this card -->
                    <firebase-document
                        path="/notes/[[item.noteid]]/meta"
                        data="{{item.meta}}"
                    ></firebase-document>

请注意,我已将notes对象直接从firebase转换为数组,因此我可以使用dom-repeat

感谢任何反馈意见

1 个答案:

答案 0 :(得分:2)

获取数据:

使用firebase-query,这将返回指定路径的项目数组。

<firebase-query
      path="/teams/[[teamid]]/notes"
      data="{{notes}}"
      >
</firebase-query>
  • 无需额外转换
  • 可用于dom-repeat

保存数据

使用firebase文档将数据保存到特定位置。

<firebase-document id="doc"></firebase-document>

然后在要添加数据的函数中执行以下操作

this.$.doc.path = null; //makes sure to not override any other data
this.$.doc.data = {}; //data that you want to save
this.$.doc.save('path'); //path in firebase where you want to save your data

示例文件结构

&#13;
&#13;
,<dom-module id="el-name">
  <template>
    <styel></style>
    
    <firebase-document id="doc"></firebase-document>
    
    <firebase-query
      id = "query"
      path = "/users"
	  data = "{{usersData}}">
    </firebase-query>
    
    <template id="dom-repeat" items="{{usersData}}" as="user">
      <div>[[user.name]]</div>
    </template>
    
    <paper-button on-tap="add"></paper-button>
  </template>
  
  <script>
    Polymer({
      is: 'el-name',
      
      properties: {},
      
      add: function() {
        this.$.doc.path = null;
        this.$.doc.data = {name: 'Some Name'};
        //save(path, key), by not giving a key firebase will generate one itself
        this.$.doc.save('/users');
      }
    });
  </script>
</dom-module>
&#13;
&#13;
&#13;