Question

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

enter image description here

我尝试做的是遍历数据中的teams属性。考虑到Polymer现在只通过Arrays循环，这被证明是非常具有挑战性的（因为Firebase最好将数据作为对象返回）。到目前为止，我可以遍历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进行更深入的解释。首先，当您在location中输入firebase-element属性时，只要您采购data和keys，就会特别使用位置 - 不是整个数据。

因此，我遇到的问题源于我的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>

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

如何在Polymer中遍历嵌套的Firebase密钥

2 个答案: