javascriptfirebasepolymerfirebase-polymer

Polymer: firebase-collection always returns empty array


I try to use firebase-collection, but whatever I try I always receive an empty array (in firebase I have a couple of entries)

<dom-module id="bar-foo">
    <template>
        <firebase-collection
           id="barFoo"
           location="https://bar-foo.firebaseio.com/items"
           data="{{items}}"></firebase-collection>
        <firebase-document location="https://bar-foo.firebaseio.com/item"
           data="{{item}}"></firebase-document>
    </template>
    <script>
        class BarFoo {
            beforeRegister() {
                this.is = 'bar-foo';

                this.properties = {
                    items: {
                        notify: true,
                        observer: 'updated',
                        type: Array
                    }
                }
             }

             updated(newList) {
                 // newList === this.items === []
                 ...
             }
        }
        Polymer(BarFoo);
   </script>
</dom-module>

the firebase-document element works! Any suggestions why I receive an empty list ?

Furthermore, when I manually add a new item to the firebase-collection I get the following in the console

this.$.barfoo.add('aaaa')
    firebase-query-behavior.html:182 Adding new item to collection with value: aaaa
    firebase-query-behavior.html:182 Firebase Event: "child_added" aaaa null
    U {k: Yh, path: L, n: ae, lc: false}

And nothing happens in firebase :(


Solution

  • Don't use an observer. When I played around, I found that the observer only ever fires once: on first load. I can't tell you why.

    Fortunately, firebase-collection fires events when data changes: https://github.com/GoogleWebComponents/firebase-element/issues/86

    Add event listeners instead of property observers:

    this.listeners = {
      'barFoo.firebase-value': 'updated'
    }
    

    This example from PolymerLabs uses event listeners instead of observers: https://github.com/PolymerLabs/todo-list/blob/master/app/elements/todo-data/todo-data.html

    Hopefully this helps, and I'll keep looking for some explanation on observer behavior for firebase-collection.