Firebase - 防止child_added与删除时limitToLast

Question

我想建立迷你网聊 - 当查看网站我设置显示5消息，如果查看更多，您可以单击按钮。所有的事情都很好，但是当我删除1个节点时，firebase自动添加最后一个节点，我该如何防止它？例如：我有节点A，B，C，D，E，F，G。我已经加载了列表C，D，E，F，G但是当我删除1时，它会自动将B添加到列表中。

<div id="messgesDiv"> 
    <center><h3>Message</h3></center> 
    </div> 
    <div style="margin-top: 20px;"> 
    <input type="text" id="nameInput" placeholder="Name"> 
    <input type="text" id="messageInput" placeholder="Message" data-id=""> 
    <input type="text" id="idproject" placeholder="ID Project"> 
    </div> 
    <button id="delete">Delete Test</button> 
    <button id="edit">Edit</button> 
    <button id="loadmore">Load more</button> 
    <button id="showlastkey">Show last key</button> 

我的JavaScript

$('#loadmore').click(function() { 
    i = 0; old = first; 
    myDataRef.orderByKey().endAt(first).limitToLast(6).on('child_added', function (snapshot){ 
     if(i == 0) 
     first = snapshot.key(); 
     var message = snapshot.val(); 
     if(snapshot.key() != old) 
     displayChatMessage(message.name, message.text, message.idproject, 'old'); 
     i++; 
     console.log('myDataRef.orderByKey().endAt(first).limitToLast(6)'); 
    }); 
    }); 

    $("#messageInput").keypress(function (e){ 
    if(e.keyCode == 13){ //Enter 
     var name = $("#nameInput").val(); 
     var text = $("#messageInput").val(); 
     var idproject = $("#idproject").val(); 
     if($("#messageInput").data("id")=='') 
     { 
     myDataRef.push({name: name, text: text, idproject: idproject}); 
     } 
     else 
     { 
     myDataRef.child(key).update({name: name, text: text, idproject: idproject}); 
     $('#messageInput').attr('data-id', ''); 
     } 
     $("#messageInput").val(""); 
    } 
    }); 


    myDataRef.limitToLast(5).on('child_added', function (snapshot){ 
     if(i == 0) 
     first = snapshot.key(); 
     var message = snapshot.val(); 
     displayChatMessage(snapshot.key(), message.name, message.text, message.idproject, 'new'); 
     i++; 
     console.log(snapshot.key()); 
     console.log(' myDataRef.limitToLast(5)'); 
    }); 



    function displayChatMessage(key, name, text, idproject, status){ 
    //console.log(name + " -- " + text + " -- " +idproject); 
    if(status == 'new') 
    { 
     $('<div/>', { 'data-id': key , 'class' : 'test'}).text(text + " - ").prepend($('<em/>').text(name+": ")).append("IdProject: "+idproject).appendTo($("#messgesDiv")); 
     $("#messgesDiv")[0].scrollTop = $("#messgesDiv")[0].scrollHeight; 
    } 
    else 
    { 
     $('<div/>', { 'data-id': key , 'class' : 'test'}).text(text + " - ").prepend($('<em/>').text(name+": ")).append("IdProject: "+idproject).insertAfter($("center")); 
     $("#messgesDiv")[0].scrollTop = $("#messgesDiv")[0].scrollHeight; 
    } 
    } 

    $('#delete').click(function() { 
    myDataRef.child(key).remove(); 
    $('#messgesDiv').filter('[data-id="'+key+'"]').remove(); 
    }); 

Answer 1

火力地堡限制查询像上的数据之上的视图。因此，如果您为最近的5条消息创建查询，那么Firebase客户端将确保您始终拥有最近5条消息。

假设您从这些消息：

message1 
message2 
message3 
message4 
message5 

现在，如果你添加一个message6，您将获得：

child_removed message1 
child_added message6 

以使总局部视图变为：

message2 
message3 
message4 
message5 
message6 

相反，当您再次删除邮件6时，您会收到以下事件：

child_removed message6 
child_added message1 (before message2) 

以便您可以更新UI并最终以正确的列表再次结束。

无法更改此API的行为。所以如果你想以不同的方式处理这种情况，你必须在你的客户端代码中这样做。

您的验证码目前只处理child_added。如果您为child_removed添加处理程序，则会看到您可以轻松地保持用户界面与数据同步。

或者你可以检测该消息已经在你的UI通过比较你增加了那些已经存在于DOM消息的关键：

function displayChatMessage(key, name, text, idproject, status){ 
    var exists = $("div[data-id='" + key + "']").length; 
    if (status == 'new' && !exists) { 
    $('<div/>', { 'data-id': key , 'class' : 'test'}).text(text + " - ").prepend($('<em/>').text(name+": ")).append("IdProject: "+idproject).appendTo($("#messgesDiv")); 
    $("#messgesDiv")[0].scrollTop = $("#messgesDiv")[0].scrollHeight; 
    } 
    else { 
    $('<div/>', { 'data-id': key , 'class' : 'test'}).text(text + " - ").prepend($('<em/>').text(name+": ")).append("IdProject: "+idproject).insertAfter($("center")); 
    $("#messgesDiv")[0].scrollTop = $("#messgesDiv")[0].scrollHeight; 
    } 
}