CODEWITHSUNDEEP
javascriptfirebasepolymerpolymer-1.0
Jp_
Jp_

Reputation: 6173

How can I nest 2 or more firebase elements?

I have the following structure in firebase and I'm trying to get the names of a user's clients.

Firebase structure

This code don't show any name, it crashes even the chrome inspector, I guess that my problem is because the second firebase element is asynchronously using the client.__firebaseKey__ before having it.

The Polymer documentation has a page informing how to render elements synchronously, but it didn't work.

            <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>

Upvotes: 1

Views: 60

Answers (1)

Jp_
Jp_

Reputation: 6173

I managed to do it, but I suspect that is not the best solution as I haven't used nothing of the firebase-element. And I may have further problems because I'm declaring my base Firebase() reference locally and I still need to get the logged user.

<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>

I decided to use I custom element, I'm not sure if the provided firebase elements are meant to be used to join documents like this.

Upvotes: 1

Related Questions