使用聚合物和firebase加入查询

时间:2016-12-26 17:55:41

标签: join firebase polymer firebase-realtime-database

我试图做一些理论上应该简单的事情。我在Firebase中有以下数据结构:

<dom-module id="project-users">
  <template>

    <firebase-query 
      id="query" 
      path="/projects/{{project.id}}/users" 
      data="{{users}}">
    </firebase-query>

    <template is="dom-repeat" items="{{users}}" as="u">
      user key: [[u.$key]]
      <!-- now do something to retrieve the full user record and display it -->
    </template>

  </template>
</dom-module>

我有一个从父元素传递的项目ID,我想显示该项目的所有用户。

constructor(props) {
        super(props);
        this.state = {
sizes: [
                {label: "90x50mm", isChecked: false, number: 10},
                {label: "85x55mm", isChecked: false, number: 12}
            ],
            ratings: [
                {label: "OneStar", isChecked: false, imgSrc: 'images/Rating1Star.svg', counter: 22},
                {label: "TwoStars", isChecked: false, imgSrc: 'images/Rating2Stars.svg', counter: 18},
                {label: "ThreeStars", isChecked: false, imgSrc: 'images/Rating3Stars.svg', counter: 34},
                {label: "FourStars", isChecked: false, imgSrc: 'images/Rating4Stars.svg', counter: 27}
            ],
            favorites: [
                {label: "Only favorites", isChecked: false, number: 12}
            ]
}

如何获得每个用户的完整用户记录,我是否需要在dom-repeat中包含一个标记?但那么它将如何异步工作?

或者这不是正确的方法吗?

非常感谢你的帮助。

1 个答案:

答案 0 :(得分:2)

我会在这里重新发布我的解决方案,因为我无法弄清楚如何在评论中格式化代码: - )

最终我最终将每个用户记录放在它自己的组件中,如下所示:

<dom-module id="project-users">
  <template>

    <firebase-query 
      id="query" 
      path="/projects/{{project.id}}/users" 
      data="{{users}}">
    </firebase-query>

    <template is="dom-repeat" items="{{users}}" as="u">
      <user-details uid=[[u.$key]]></user-details>
    </template>

  </template>
</dom-module>

然后在user-details.html中:

<dom-module id="user-details">
  <template>

    <firebase-document 
      path="/users/[[uid]]" 
      data="{{u}}">
    </firebase-document>

    [[u.name]]<br />
    [[u.email]]<br />
    [[u.tel]]<br />

  </template>
</dom-module>