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

Question

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

然后我有一些动态改变路径的链接。我希望数据列表能够相应更新。

当我第一次加载页面时，它工作正常，但每当我点击链接更新路径（因此获取新数据）时，它都不会返回任何内容。

我检查了观察者发生了什么，看起来每当我更新数据路径时，数据都会更新两次：首先它返回我期望的实际数据，然后返回一个空数组。

以下是组件：

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

这是我点击其中一个链接时控制台显示的内容：

似乎有一些异步的巫术正在进行 - 关于如何解决这个问题的任何想法？

Answer 1

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

此处已有报道：https://github.com/firebase/polymerfire/issues/100

Answer 2

看起来这是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 __queryChanged已经在firebase-query.html的第279行将__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首先在__queryChanged的第23行__pathChanged观察到路径的变化。然后触发firebase-database-behavior.html将旧数据清零并设置firebase事件处理程序以观察对firebase数据库的更改。随后，ENOENT中的EPIPE被调用，它再次将数据清零，但是在firebase事件处理程序已经写入新数据之后。