Polymer 和 Firebase：动态更改 <firebase-query> 的路径

Question

我有一个组件，它获取一些数据。该路径是动态的，因为它内部有一个绑定。

然后我有一些 link 可以动态改变路径。我希望数据列表会相应更新。

当我第一次加载页面时，一切正常，但每当我单击 link 更新路径（并因此获取新数据）时，它 returns 什么也没有。

我检查了观察者的情况，看起来每当我更新路径时，数据都会更新两次：首先是 returns 我期望的实际数据，然后是 returns一个空数组。

组件如下：

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

这是当我单击其中一个 link 时控制台显示的内容：

似乎发生了一些异步魔法 - 知道如何解决这个问题吗？

Answer 1

看起来 这是 Polymerfire 中的错误。现在，对 firebase-database-behavior.html 的本地副本进行以下更改将解决问题，看似没有工件，但这确实需要错误报告。我一有机会就开始填写错误报告，他们来回往往要花很多时间:(

只需注释掉firebase-database-behavior.html中的第86行。新的 __pathChanged 函数应该是这样的。

__pathChanged: function(path, oldPath) {
  if (oldPath != null && !this.disabled && this.__pathReady(path)) {
    this.syncToMemory(function() {
      // this.data = this.zeroValue;
    });
  }
},

发生了什么事

当路径改变时，会写入代码将旧值清零，并且此代码存在于 firebase-databse-behavior.html 中，firebase-query 继承了它。这是有道理的，但是 firebase-query 已经在 firebase-query.html.

的第 279 行将 __queryChanged 上的数据归零

__queryChanged: function(query, oldQuery) {
  if (oldQuery) {
    oldQuery.off('child_added', this.__onFirebaseChildAdded, this);
    oldQuery.off('child_removed', this.__onFirebaseChildRemoved, this);
    oldQuery.off('child_changed', this.__onFirebaseChildChanged, this);
    oldQuery.off('child_moved', this.__onFirebaseChildMoved, this);

    this.syncToMemory(function() {
      this.set('data', this.zeroValue);
    });
  }

  if (query) {
    query.on('child_added', this.__onFirebaseChildAdded, this.__onError, this);
    query.on('child_removed', this.__onFirebaseChildRemoved, this.__onError, this);
    query.on('child_changed', this.__onFirebaseChildChanged, this.__onError, this);
    query.on('child_moved', this.__onFirebaseChildMoved, this.__onError, this);
  }
},

路径的变化首先被firebase-query观察到__computeQuery在firebase-query.html的第23行。 __queryChanged 然后触发将旧数据归零并设置 firebase 事件处理程序以观察 firebase 数据库的变化。随后，调用 firebase-database-behavior.html 中的 __pathChanged 再次将数据清零，但是在新数据已经被 firebase 事件处理程序写入之后。

Answer 2

这实际上是 firebase-query 中的错误，已通过此拉取请求修复： https://github.com/firebase/polymerfire/pull/167.

这里已经报道过：https://github.com/firebase/polymerfire/issues/100

Polymer 和 Firebase：动态更改 <firebase-query> 的路径

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

asynchronous

firebase

polymer

firebase-realtime-database

polymerfire

发生了什么事