Question

我一直在使用ForEach来填充我的HTML表格。

到目前为止这么好，但桌子不是实时的。我必须重新加载它的功能才能再次获取结果。如果我添加或删除一个条目，则在重新加载之前不会发生任何错误。

有没有办法让这个实时？来自Firebase文档的代码：

var query = firebase.database().ref("users").orderByKey();
query.once("value")
.then(function(snapshot) {
snapshot.forEach(function(childSnapshot) {
  // key will be "ada" the first time and "alan" the second time
  var key = childSnapshot.key;
  // childData will be the actual contents of the child
  var childData = childSnapshot.val();
});
});

请原谅我对JS的不了解，我正在努力。

Answer 1

使用once()您告诉该数据库您只想获取当前值并且不关心更新。

获取实时更新的解决方案是使用on()。由于承诺只能在每次更新调用on()处理程序时解析一次，因此您应该使用on()回调：

var query = firebase.database().ref("users").orderByKey();
query.on("value", function(snapshot) {
  snapshot.forEach(function(childSnapshot) {
    // key will be "ada" the first time and "alan" the second time
    var key = childSnapshot.key;
    // childData will be the actual contents of the child
    var childData = childSnapshot.val();
  });
}, function(error) {
  console.error(error);
});

如果您关心更新用户界面以响应此类更新，您可能希望使用child_处理程序。这些在JSON树中被称为低一级，因此在您的情况下，对于添加/更改/删除的每个用户。这允许您更直接地更新UI。例如，上述child_added事件可能是：

var query = firebase.database().ref("users").orderByKey();
query.on("child_added", function(snapshot) {
    var key = snapshot.key;
    var data = snapshot.val();
    // TODO: add an element to the UI with the value and id=key
  });
}, function(error) {
  console.error(error);
});

现在您可以使用以下方式处理其他事件：

query.on("child_changed", function(snapshot) {
  // TODO: update the element with id=key in the update to match snapshot.val();
})
query.on("child_removed", function(snapshot) {
  // TODO: remove the element with id=key from the UI
})

我们在guide for web developers和reference documentation中广泛涵盖了这一点以及更多内容。

有没有办法在Firebase中制作实时ForEach？

1 个答案: