Polymer Firebase：打印异步数据

Question

正在使用 Firebase 试用 Polymer 0.8。我无法打印异步绑定的数据

<dom-module id="card-user">
  <template>
    <div>{{name}}</div>
  </template>
</dom-module>

脚本标签如下所示

Polymer({
    is: 'card-user',
    properties: {
        name: {
            type: String,
            computed: 'getFirebaseName(id)'
        }
    },
    getFirebaseName: function(id) {
        var ref = new Firebase('https://xxx.firebaseio.com/users/' + id + '/name');         
        ref.once("value", function(snapshot) {          
          return snapshot.val();
        }, function (errorObject) {
          console.log("The read failed: " + errorObject.code);
        });
    }
  });

Answer 1

您不能 return 异步加载的值。

您的 getFirebase 方法将在 Firebase 加载完成并触发 on("value" 回调之前退出（并 returned undefined）。

如果你给这个函数添加一些日志记录，这是最容易看到的：

    getFirebaseName: function(id) {
        var ref = new Firebase('https://xxx.firebaseio.com/users/' + id + '/name');
        console.log("Start loading value from Firebase");
        ref.once("value", function(snapshot) {          
          console.log("Value gotten from Firebase");
          return snapshot.val();
        }, function (errorObject) {
          console.log("The read failed: " + errorObject.code);
        });
        console.log("Returning from getFirebaseName");
    }

您将在 JavaScript 控制台中看到的是：

Start loading from Firebase
Returning from getFirebaseName
Value gotten from Firebase

凭直觉，您可能希望交换最后两行。但这不是异步加载的工作方式：Firebase 开始加载数据，但由于这可能需要相当长的时间，因此浏览器只是继续执行它之后的代码。

一个典型的解决方案是对回调中的值做任何您想做的事情：

    getFirebaseName: function(id) {
        var ref = new Firebase('https://xxx.firebaseio.com/users/' + id + '/name');
        ref.once("value", function(snapshot) {          
          console.log(snapshot.val());
        }, function (errorObject) {
          console.log("The read failed: " + errorObject.code);
        });
    }

我们现在在哪里记录 snapshot.val() 您当然也可以 add/set 将新值 DOM.

或者您可以查看 returning Promises。但我会把那个留给其他人解释。

看看这个答案或其中链接的一些答案：Asynchronous access to an array in Firebase。人们经常被这种反直觉的行为所困扰，阅读其他人的经验和答案也可能对您有所帮助。

Polymer Firebase：打印异步数据

Polymer Firebase: Print async data

firebase

polymer