如何嵌套2个或更多firebase元素?

时间:2016-05-15 01:17:59

标签: javascript firebase polymer polymer-1.0

我在firebase中有以下结构,并且我试图获取用户客户的名称。

Firebase structure

此代码不显示任何名称,即使是chrome检查程序也会崩溃,我想我的问题是因为第二个firebase元素在使用之前使用client.__firebaseKey__异步。

Polymer文档有page通知如何同步呈现元素,但它没有工作。

            <template is="dom-bind">
              <firebase-collection
                location="https://periodiza.firebaseio.com/user/-KHkue7mLaVe1b_bO3Zb/clients"
                data="{{clients}}"
              ></firebase-collection>
              <template is="dom-repeat" items="[[clients]]" as="client">
                <firebase-document
                  location="https://periodiza.firebaseio.com/user/{{client.__firebaseKey__}}/name"
                  data="{{clientName}}"
                ></firebase-document>
                <a class="paper-item-link">
                  <paper-item raised>[[clientName]]</paper-item>
                </a>
              </template>
            </template>

1 个答案:

答案 0 :(得分:1)

我设法做到了,但我怀疑这不是最佳解决方案,因为我还没有使用firebase-element。我可能还有其他问题,因为我在本地声明我的基本Firebase()引用,我仍然需要获取已登录的用户。

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/firebase-element/firebase.html">

<dom-module id="client-list">
  <template>
    <template is="dom-repeat" items="{{clients}}">
      <a class="paper-item-link">
        <paper-item raised>cliente {{item.name}}</paper-item>
      </a>
    </template>
  </template>
  <script>
    function updateClients(context){
      var base = new Firebase("https//periodiza.firebaseio.com/user")

      base.child("-KHkue7mLaVe1b_bO3Zb").child("clients").on("value", snapshot => {
        context.clients = []
        for(key in snapshot.val()){
          base.child(key).once("value", snapshot => {
            context.push('clients', snapshot.val())
          })
          base.child(key).once("child_changed", snapshot => {
            updateClients(context)
          })
        }
      })
    }

    Polymer({
      is: 'client-list',

      ready: function(){ updateClients(this) }
    })
  </script>
</dom-module>

我决定使用自定义元素,我不确定提供的firebase元素是否用于连接这样的文档。