Question

我是Firebase的新手，我开始在聊天室工作，除了一件事之外，它的工作原理也是如此。我希望对要显示的消息数设置上限，我已经使用limit（13）完成了此操作。下一部分是我不太了解该怎么做..当上限为13时，我想从聊天中删除第一条消息（#messagesDiv div:nth-child(1)），并将其从我的Firebase数据库中删除。此外，当我删除第一条消息时，我想在列表底部同时添加新消息。我已经尝试过查看Firebase文档但我没有找到任何接近我想要实现的内容。如果问题含糊不清，请告诉我如何更清楚地说明问题。感谢帮助。

dataAddQuery = myDataRef.startAt().limit(13); //<-- Maximum messages displayed

dataAddQuery.on('child_added', function(snapshot) {
    var message = snapshot.val();
    displayChatMessage(message.name, message.text);
});

dataRemoveQuery = myDataRef.endAt().limit(1); //<-- Does this remove the 1st message?

dataRemoveQuery.on('child_removed', function(snapshot) {
    var message = snapshot.val();
    removeChatMessage(message.name, message.text);
    //Tried to call displayChatMessage here but that didn't work the way I wanted
});

$('#messageInput').keypress(function (e) {
    if (e.keyCode == 13) {
        var name = $('#nameInput').val();
        var text = $('#messageInput').val();
        myDataRef.push({name: name, text: text});
        $('#messageInput').val('');
    }
});

function displayChatMessage(name, text) {

    $('<div/>').text(text).prepend($('<b/>').text(name+': ')).appendTo($('#messagesDiv'));
};

function removeChatMessage(name, text) {

    $('#messagesDiv div:nth-child(1)').remove();
}

Answer 1

我没有尝试将视图和数据限制为13个项目，而是只关注数据。如果你可以将孩子的数量限制为13，你可以简单地显示所有孩子。

我写了a quick jsbin here：

var childnames = [];
ref.on('child_added', function(snapshot) {
  // display child
  childnames.push(snapshot.name());
  if (childnames.length > 13) {
    ref.child(childnames[0]).remove();
    childnames = childnames.slice(1);
  }
});
ref.on('child_removed', function(snapshot) {
  list.removeChild(document.getElementById(snapshot.name()));
});

我只是通过将id设置为Firebase参考的name来识别HTML中的子元素。

我希望流程清晰，如果没有检查垃圾箱并让我知道。

在Firebase数据库中删除div +其索引，并在容器中添加新div

1 个答案: