Polymer and Firebase: changing the path of <firebase-query> dynamically

Question

I have a in a component, which fetches some data. The path is dynamic, as it has a binding inside it.

I then have some links that change the path dynamically. I would expect the list of data to update accordingly.

when I first load the page, it works all fine, but whenever I click on a link to update the path (and therefore to fetch new data), it returns nothing.

I checked what was going on with an observer, and it looks like whenever I update the path the data is updated twice: first it returns the actual data I would expect, and then it returns an empty array.

Here is the component:

<dom-module id="test-one">

  <template>

    <firebase-query app-name="main" path="/templates/[[template]]" data="{{items}}"></firebase-query>

    <a on-tap="changeTemplate" data-template="template1">Template 1</a><br />
    <a on-tap="changeTemplate" data-template="template2">Template 2</a><br />

    <p>Current template is [[template]]</p>

    <template is="dom-repeat" items="{{items}}" as="item">
      [[item.ref]] - [[item.description]]<br />
    </template>

  </template>

  <script>
    Polymer({
      is: 'test-one',
      properties: {
        items: {type: Array, observer: "dataChanged"},
        template: {type: String, value: "template1"},
      },
      dataChanged: function(newData, oldData) {
        console.log(newData);
      },
      changeTemplate: function(e) {
        elm = e.currentTarget;
        template = elm.getAttribute("data-template");
        console.log("link has been clicked, we're changing to "+template);
        this.set("template", template);
      }
    });
  </script>

</dom-module>

This is what the console shows when I click on one of the links:

There seems to be some asynchronious sorcery going on - any idea on how to solve this?

Answer 1

This is effectively a bug in firebase-query, fixed with this pull request: https://github.com/firebase/polymerfire/pull/167.

It has already been reported here: https://github.com/firebase/polymerfire/issues/100