如何在 Polymer 中循环嵌套的 Firebase 键

Question

所以，我有一个正在保存到 Firebase 的 Polymer 项目。我的数据如下所示：

我想做的是遍历数据中的 teams 属性。考虑到 Polymer 现在只循环遍历数组，这被证明是非常具有挑战性的（因为 Firebase 更喜欢 returns 数据作为对象）。到目前为止，我可以循环遍历 keys 并获得 teams，但无法进入 teams 循环遍历它。这是我的代码：

<template repeat="{{key in keys}}">
   <div class="tile">
       <paper-shadow z="2" class="card" animated>
           <div id="header" class="header"></div>

            <div class="content">
              <p>{{data[key]}}</p>
              <span>{{team.club}}</span>
            </div>

            <footer horizontal layout>
              <paper-button id="teamview" on-tap="{{viewTeam}}" flex>VIEW</paper-button>
              <span flex></span>
              <paper-button id="teamDelete" on-tap="{{deleteTeam}}">DELETE</paper-button>
              <paper-button id="teamEdit" on-tap="{{editTeam}}">EDIT</paper-button>
            </footer>
        </paper-shadow>
     </div>
 </template>

感觉几乎所有场景都试过了。每次我尝试用 repeat="{{team in key}}" 循环一个级别时，它都会中断。看看其他人是否对此有更好的看法？提前致谢！

Answer 1

我认为你需要像这样绑定数据、id 和键。

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../firebase-element/firebase-element.html">
 
<!--
Element providing solution to displaying value from firebase.
##### Example
    <firebase-repeat-element></firebase-repeat-element>
@element fb-repeat-element
@blurb Element providing solution to displaying value from firebase.
@status alpha
@homepage http://basicelements.github.io/firebase-repeat-element
-->
<polymer-element name="firebase-repeat-element" attributes="firebaseName">
  <template>
    <firebase-element location="https://{{firebaseName}}.firebaseio.com/members/{{id}}" data="{{data}}" keys="{{keys}}"></firebase-element>
    <template repeat="{{id in keys}}">
      <h2>{{data[id]['name']}}</h2>
      <img src="{{data[id]['image']}}">
    </template>
 
  </template>
  <script>
    Polymer({
      
    });
  </script>
</polymer-element>

自由分叉@https://gist.github.com/ed2ba06d5a16d11381d9.git

Answer 2

因此，我发现的方式需要对 Polymer 和 Firebase 进行更深入的解释。首先，当您在 firebase-element 中输入您的 location 属性时，每当您采购 data 和 keys 时，它专门针对 that 位置 - 不是您的整个数据。

因此，我遇到的问题根源于我的 location 属性。一旦我更改了我的位置以指定我想要 push 和源数据的确切嵌套级别 - 一切都很好。结束代码如下所示：

<firebase-element id="fbase" 
   location="https://volleyball-app.firebaseio.com/{{user.uid}}/userTeams" 
   data="{{userTeams}}" keys="{{keys}}" dataReady="{{userReady}}">
</firebase-element>

<template repeat="{{key in keys}}">
  <div class="content">
    <p>{{userTeams[key]['team']}}</p>
    <span>{{userTeams[key]['club']}}</span>
  </div>
</template>

这是在重复 <firebase-element id="fbase" location="https://volleyball-app.firebaseio.com/{{user.uid}}/userTeams 位置中的所有 keys（仅此而已）。从那里我抓住了每个键中的 team 属性。

如何在 Polymer 中循环嵌套的 Firebase 键

How to loop through nested Firebase keys in Polymer

polymer

firebase-polymer