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

Firebase限制查询在数据之上充当视图。因此，如果您为5条最新消息创建查询，Firebase客户端将确保您始终拥有5条最新消息。

假设您从这些消息开始：

message1
message2
message3
message4
message5

现在，如果您添加消息6，您将获得：

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添加了处理程序，则会发现您可以轻松地将用户界面与数据保持同步。

或者，您可以通过比较您添加到DOM中已存在的消息的密钥来检测消息是否已在您的UI中：

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;
  }
}

Firebase - 使用limitToLast删除时防止child_added

1 个答案: