javascript - 如何使用firebase实时数据库检查数据是否已经在html表中？

Question

我的 HTML 表中的数据库数据有一个实时监听器，该数据由 javascript 生成，当我添加新条目或删除旧条目时，表中之前的数据会被复制。

var database = firebase.database().ref().child('transactions');
            database.on('value', function(snapshot){
                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);

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

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

Answer 1

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

我看到两个选项:

1. 每次获取更新数据时都会删除表格
2. 执行更细粒度的更新

每次获取更新数据时都会删除表格

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

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

这应该可以正常工作，但是每次其中的任何内容发生变化时都会重新绘制整个表格内容。当 table 很大时，这可能会导致明显的闪烁。

执行更细粒度的更新

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

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