2016-11-03 3 views
-1

ミニウェブチャットを作成したい - ビューサイトで5メッセージを表示し、さらに表示する場合はボタンをクリックできます。すべてのことは問題ありませんが、1つのノードを削除すると、firebase autoは最後のノードを追加します。どうすればそれを防ぐことができますか? 例:私は、ノードA、B、C、D、E、F、Gを有しています。私は、リストC、D、E、F、Gをロードしていたが、私はすべてに1を削除すると、それが自動リストにBを追加します。Firebase - limitToLastで削除したときにchild_addedを防止する

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

答えて

0

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) 

UIを更新して、正しいリストに戻ってください。

APIのこの動作を変更する方法はありません。したがって、状況を異なる方法で処理したい場合は、クライアントサイドのコードでこれを行う必要があります。

あなたのコードは、現在だけchild_addedを処理します。あなたがchild_removedのためのハンドラを追加している場合、あなたは簡単にデータに同期してユーザーインターフェイスを保つことができることがわかります。

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

また、あなたがDOMに既に存在しているものに追加しているメッセージのキーを比較することによって、メッセージがあなたのUIにすでにあることを検出することができます

関連する問題