Question

我在由javascript生成的HTML表中的数据库数据上有一个实时侦听器，当我添加新条目或删除旧条目时，表中以前的数据将被复制。

ls . | python script.py

当它是“ database.once”并且我有一个刷新按钮时，我不会重复数据，但是我将其更改为“ database.on”，现在只要执行任何操作，表中的数据就会重复数据库。

我正在寻找最具成本效益的方法。我不确定'database.once'或'database.on'中的哪一个能省钱。

Answer 1

由于您监听value上的transactions事件，因此每次调用回调时，快照将包含transactions下的所有数据。因此，所有未更改的数据也将在快照中，从而导致多次在您的表中。

我看到两个选择：

每次获取更新数据时都要擦拭表格
执行更细粒度的更新

每次获取更新数据时都要擦拭表

这是最简单的，因为它需要对现有代码进行最少的更改。只要您从数据库中获取更新的数据，只需清除表中的内容即可：

var database = firebase.database().ref().child('transactions');
database.on('value', function(snapshot){
    $('#ex-table').empty(); // clear existing contents
    if(snapshot.exists()){
        var content = '';
        snapshot.forEach(function(data){
            var CustomerName = data.val().CustomerName;
            var AmountSent = data.val().AmountSent;
            var TimeEffected= data.val().TimeEffected;
            var DateEffected = data.val().DateEffected;
            var Successful = data.val().Successful;

            content += '<tr>';
            content += '<td>' + CustomerName + '</td>';//column2
            content += '<td>' + AmountSent + '</td>'; //column1 
            content += '<td>' + TimeEffected + '</td>'; //column1 
            content += '<td>' + DateEffected + '</td>'; //column1
            content += '<td>' + Successful + '</td>'; //column1
            content += '</tr>';
        });
        $('#ex-table').append(content);

这应该可以正常工作，但是每次其中的任何更改都会重新绘制整个表的内容。桌子很大时，这可能导致明显的闪烁。

执行更细粒度的更新

另一种方法是执行更细粒度的更新。即最初，您添加所有子项，之后仅添加新的子项，删除从数据库中删除的所有数据，等等。

Firebase为此具有特定的事件，这些事件在数据库中触发较低的一级。例如，child_added事件被定义为“首先对引用下的每个节点触发，然后每次在引用下添加节点时触发”。同样，有child_removed，child_changed和child_moved事件。通过这些事件，您可以对表执行更详细的更新。

例如，下面是处理child_added的方法：

var database = firebase.database().ref().child('transactions');
database.on('child_added', function(snapshot){
    var data = snapshot.val();

    var content = '<tr id="'+snapshot.key+'">';
    content += '<td>' + data.CustomerName + '</td>';
    content += '<td>' + data.AmountSent + '</td>';
    content += '<td>' + data.TimeEffected + '</td>';
    content += '<td>' + data.DateEffected + '</td>';
    content += '<td>' + data.Successful + '</td>';
    content += '</tr>';

    $('#ex-table').append(content);
});

除了稍微清理代码外，我还将snapshot.key添加到tr中。这样一来，您就可以稍后在键行中查找，以防万一您遇到child_changed或child_removed事件。

例如，以下是从数据库中删除该行时如何从表中删除该行：

database.on('child_removed', function(snapshot){
    $('#'+snapshot.key).remove()
});

如何使用Firebase实时数据库检查html表中是否已存在数据？

1 个答案:

每次获取更新数据时都要擦拭表

执行更细粒度的更新