javascript - 更新 Firebase 时如何更新 HTML 表格？

Question

我正在使用 child_added 和 child_changed。添加的子项工作得很好，但 child_changed 在我的表中复制了。请帮助我克服这个问题。这是我的代码:

var rootRef = firebase.database().ref().child("REPORTS").child(date);

rootRef.on("child_added", function(snapshot){
    var date = snapshot.child("dateAndTime").val();
    var lat = snapshot.child("latitude").val();
    var long = snapshot.child("longitude").val();
    var link = snapshot.child("link").val();
    var report = snapshot.child("report").val();
    var status = snapshot.child("status").val();
    var needs = snapshot.child("needs").val();


    $("#table_body").append("<tr><td>" +date+"</td><td>"+report+"</td><td>"+lat+"</td><td>"+long+"</td><td>"+status+"</td><td>"+needs+"</tr>");

});

rootRef.on("child_changed", function(snapshot){
    var date = snapshot.child("dateAndTime").val();
    var lat = snapshot.child("latitude").val();
    var long = snapshot.child("longitude").val();
    var link = snapshot.child("link").val();
    var report = snapshot.child("report").val();
    var status = snapshot.child("status").val();
    var needs = snapshot.child("needs").val();


    $("#table_body").append("<tr><td>" +date+"</td><td>"+report+"</td><td>"+lat+"</td><td>"+long+"</td><td>"+status+"</td><td>"+needs+"</tr>");

});

当 firebase 中更新某个值时，如何更新我的表

Answer 1

处理child_changed的代码应该更新现有的HTML元素，而不是附加新的HTML元素。最简单的方法是确保根据 child_added 中的 snapshot.key 为 HTML 元素指定一个 id:

var rootRef = firebase.database().ref().child("REPORTS").child(date);

rootRef.on("child_added", function(snapshot){
    var date = snapshot.child("dateAndTime").val();
    var lat = snapshot.child("latitude").val();
    var long = snapshot.child("longitude").val();
    var link = snapshot.child("link").val();
    var report = snapshot.child("report").val();
    var status = snapshot.child("status").val();
    var needs = snapshot.child("needs").val();


    $("#table_body").append("<tr id='"+snapshot.key+"'><td>" +date+"</td><td>"+report+"</td><td>"+lat+"</td><td>"+long+"</td><td>"+status+"</td><td>"+needs+"</tr>");

});

然后您可以通过 child_changed 中的 id/key 查找元素并更新它:

rootRef.on("child_changed", function(snapshot){
    var date = snapshot.child("dateAndTime").val();
    var lat = snapshot.child("latitude").val();
    var long = snapshot.child("longitude").val();
    var link = snapshot.child("link").val();
    var report = snapshot.child("report").val();
    var status = snapshot.child("status").val();
    var needs = snapshot.child("needs").val();


    $("#"+snapshot.key).replaceWith("<tr id='"+snapshot.key+"'><td>" +date+"</td><td>"+report+"</td><td>"+lat+"</td><td>"+long+"</td><td>"+status+"</td><td>"+needs+"</tr>");

});