Question

用firebase试用聚合物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

您无法返回异步加载的值。

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

如果您向此功能添加一些日志记录，则很容易看到：

    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()，您当然也可以在DOM中添加/设置新值。

替代方案，您可以查看返回的Promises。但我会留下那个让其他人解释的。

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

Polymer Firebase：打印异步数据

1 个答案: