在Firebase中创建新目录并插入数据

时间:2014-07-29 20:58:37

标签: jquery firebase

我想动态地在Firebase中创建五个新目录。我还想动态地在这些目录中插入数据。我为此目的编写了这个jquery脚本。

for(var i=0; i<5; i++) {
 var dataRef = new Firebase('https://blr-reaction-buttons.firebaseio.com/' + i);
 dataRef.on('value', function (snapshot) {
  var tempdata = snapshot.val();
  if (!tempdata) {
   tempdata=50;
   dataRef.set(tempdata);
  }
 });
}

但是它不是创建多个目录,而是创建一个目录(实际上是最后一个目录)(如下图所示)......

generated directory of my firebase script

我只是不明白为什么会这样。请帮忙。任何形式的帮助将不胜感激。提前谢谢。

2 个答案:

答案 0 :(得分:6)

Firebase实际上没有目录,但所有内容都是JavaScript对象。这意味着与目录最接近的是包含另一个对象的键:)

换句话说,我假设你想在Forge看到类似的东西: firebase forge

要使Firebase看起来像这样,您可以在本地创建一个JavaScript对象,并使用set将其保存到根节点。然后,您可以使用读取回调value来监听更改。这是实现此目的的代码:

<html>
<head>
  <script src='https://cdn.firebase.com/js/client/1.0.15/firebase.js'></script>
  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'>
  </script>
</head>
<body>

<script>
  /* Write 5 numbered objects, each set to 50 */

  // Create a new Firebase data reference to the root
  var dataRef = 
      new Firebase('https://test-firebase-please-ignore.firebaseio.com/');
  // Create a JavaScript object to hold stuff
  var tempData = {};
  // Add 5 things to it
  for(var i=0; i<5; i++) {
    tempData[i] = {value: 50};
  }
  // Save it to Firebase
  dataRef.set(tempData);


  /* Meanwhile, create a listener that gets updates when the data changes */

  dataRef.on('value', function(snapshot) {
    // Log the whole thing
    console.log(snapshot.val());
  });
</script>
</body>
</html>

答案 1 :(得分:3)

这是一个反对你的直觉的异步性的经典案例。

当您致电dataRef.on('value',时,它可能会联系服务器以获取该值。该操作可能需要很长时间,因此不是等待结果(这会阻止浏览器),而是在值可用时调用您。

不幸的是,在调用回调函数时,您已将dataRef值更改为指向其他值:最后一个dataRef 4

就像你的代码按此顺序执行:

var i = 0
var dataRef = new Firebase('https://blr-reaction-buttons.firebaseio.com/' + i);
dataRef.on('value', ... };

// Your callback is not invoked immediately, but only once the server returns the value.
// But in the meantime your main code continues with the next iteration through the loop

i = 1;
var dataRef = new Firebase('https://blr-reaction-buttons.firebaseio.com/' + i);
dataRef.on('value', ... };

// Same as before: we're now waiting for 2 values to become available

i = 2;
var dataRef = new Firebase('https://blr-reaction-buttons.firebaseio.com/' + i);
dataRef.on('value', ... };

// Let's say that all values becomes available at this point, so your callback code executes

function (snapshot) {
  var tempdata = snapshot.val();
  if (!tempdata) {
   tempdata=50;
   dataRef.set(tempdata);
  }
 });
function (snapshot) {
  var tempdata = snapshot.val();
  if (!tempdata) {
   tempdata=50;
   dataRef.set(tempdata);
  }
 });
function (snapshot) {
  var tempdata = snapshot.val();
  if (!tempdata) {
   tempdata=50;
   dataRef.set(tempdata);
  }
 });

请注意所有三种情况中的行dataRef.set?此时,单个变量dataRef引用ref 2处的对象。您最终将值设置为相同的ref三次。

一个简单的解决方案就是始终设置值:

for(var i=0; i<5; i++) {
 var dataRef = new Firebase('https://blr-reaction-buttons.firebaseio.com/' + i);
 var tempdata=50;
 dataRef.set(tempdata);
}

Jenny Murphy的方法也会很好。将在所谓的闭包中捕获不同的dataRef值(google用于 javascript闭包立即调用函数表达式以了解更多信息)。