Firebase - Запретить child_added при удалении с limitToLast

Question

Я хочу построить мини-веб-чат. Когда на сайте просмотра я показываю 5 сообщений, и если вы видите больше, вы можете нажать кнопку. Все хорошо, но когда я удаляю 1 узел, firebase автоматически добавляет последний узел, как я могу его предотвратить? Ex: У меня есть узел 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

Firebase предельные запросы действуют как зрения поверх данных. Поэтому, если вы создаете запрос для 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) 

Чтобы обновить пользовательский интерфейс, верните его в правильный список.

Невозможно изменить это поведение API. Поэтому, если вы хотите по-разному обрабатывать ситуацию, вам придется сделать это в своем клиентском коде.

В настоящий момент ваш код обрабатывается child_added. Если вы добавили обработчик для child_removed, вы увидите, что вы можете легко синхронизировать пользовательский интерфейс с данными.

В качестве альтернативы вы можете обнаружить, что сообщение уже находится в пользовательском интерфейсе, сравнивая ключ сообщения вы добавляете к уже присутствующим в 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; 
    } 
}