Polymer Firebase：打印异步数据 [英] Polymer Firebase: Print async data
问题描述
< dom-module id =card-user>
< template>
< div> {{name}}< / div>
< / template>
< / dom-module>
脚本标记看起来像这样
<$ p （
是：'card-user'，
properties：{
name：{
type：String，
计算：'getFirebaseName（id）'
}
}，
getFirebaseName：function（id）{
var ref = new Firebase（'https://xxx.firebaseio.com （value，function（snapshot）{
return snapshot.val（）;
}，function（errorObject ）{
console.log（The read failed：+ errorObject.code）;
}）;
}
}）;
您不能返回值异步加载。
您的 getFirebase 方法将退出（并返回 undefined ），然后在Firebase加载完成后触发 on（value callback）。
最简单的方法就是添加一些日志到这个函数：
$ b $ pre $ getFirebaseName：function（id）{
var ref = new Firebase（'https://xxx.firebaseio.com/users/'+ id +'/ name'）;
console.log（从Firebase开始加载值）;
ref。一次（价值，功能（快照）{
console.log（从Firebase得到的价值）;
返回snapshot.val（）;
}，function（errorObject）{
console.log（读取失败：+ errorObject.code）;
}）;
console.log（从getFirebaseName返回）;
}
您将在JavaScript控制台中看到的是：
开始加载m Firebase
从getFirebaseName返回
从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 （读取失败：+ errorObject.code）;
}）; （b
$ p 在那里我们现在记录 snapshot.val（） 你当然也可以添加/设置新的值到DOM。
另外，你可以看看返回的承诺。但是我会留下一个给其他人解释。
看看这个答案或在那里链接的一些答案：异步访问Firebase中的数组。人们被这种反直觉行为所困扰，阅读其他人的经验，答案也可能对你有帮助。
Trying out polymer 0.8 with firebase. I am not able to print data that is being bound asynchronously
<dom-module id="card-user">
<template>
<div>{{name}}</div>
</template>
</dom-module>
The script tag looks like this
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);
});
}
});
解决方案 You cannot return a value that is asynchronously loaded.
Your getFirebase method will have exited (and returned undefined) way before the Firebase loading has finished and the on("value" callback is triggered.
This is most easy to see if you add some logging to this function:
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");
}
What you will see in the JavaScript console is:
Start loading from Firebase
Returning from getFirebaseName
Value gotten from Firebase
Intuitively you probably expected those last two lines to be swapped. But that is not how asynchronous loading works: Firebase starts loading the data, but since that can take quite some time the browser simply continues executing the code after it.
One typical solution is to do whatever you want to do with the value inside the callback:
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);
});
}
Where we now log the snapshot.val() you can of course also add/set the new value into the DOM.
Alternative you can look into returning Promises. But I'll leave that one for someone else to explain.
Have a look at this answer or some of the answers linked in there: Asynchronous access to an array in Firebase. People get bitten by this counter-intuitive behavior a lot and reading other people's experience and the answer might help you too.
这篇关于Polymer Firebase：打印异步数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
