HTMLテーブルを更新する方法Firebaseを更新するときは？

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

代わりの新しいHTML要素、child_changedべき更新処理するコードを追加して更新されたとき、どのように私は私のテーブルを更新することができます既存のHTML要素。

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 /キーによって要素を検索し、それを更新することができます：

これを行う最も簡単な方法は、あなたが id child_addedに snapshot.keyに基づいてHTML要素を与える確保することです

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>"); 

});