Question

我正在使用Fire-base更新网站表。实时将数据库中的数据添加到表中非常有用。唯一的挫折是，从数据库中删除数据后，它仍然会反映在网站表中，除非或直到重新加载页面为止，这是我试图避免的。

此刻，我尝试使用 child_removed 来查看它是否响应任何命令，但我对此不太满意。

// web app's Firebase configuration
var firebaseConfig = {
...
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

var database = firebase.database().ref().child('basketball');

//if a child is added add to webiste table
database.on('value', function(snapshot){
    if(snapshot.exists()){
        var content = '';
        snapshot.forEach(function(data){
            var val = data.val();
            content +='<tr>';

            content +='<td class=" align-middle text-center">';
            content +='<span class="user-initials bg-success-light25 text-success">FB</span>';
            content +='</td>';

            content +='<td class="align-middle">';
            content +='<small class="text-muted weight-300">' + val.sport + '</small>';
            content +='<div><a id="calccall" href="#" class="weight-400">' + val.home_team + ' vs ' + val.away_team + '</a></div>';
            content +='</td>';

            content +='<td class="align-middle">';
            content +='<div class="weight-400">' + val.market + '</div>';
            content +='</td>';

            content +='<td class="align-middle"><span class="material-icons align-middle md-18 text-success">expand_less</span>' + val.arbitrage + '%</td>';
            content +='<td class="align-middle text-right">' + val.game_time + '</td>';

            content += '</tr>';
        });
        $('#test_table').append(content)
    }
});

预期的结果是，一旦在火库数据库中删除了行，就会从网站表中删除行

Answer 1

只要basketball下的数据发生更改，Firebase就会使用新的快照basketball下的所有快照再次调用您的回调。在这种方法中，您将重建整个HTML内容，然后使用以下命令将它们追加附加到表中：

$('#test_table').append(content)

因此，如果您从表中的3个子节点开始，那么您正在为此构建HTML并将其添加到表中，从而使其变为：

row1
row2
row3

现在，如果您删除最后一行，则回调将再次触发，并将剩余数据添加到表的末尾，因此最终得到：

row1
row2
row3
row1
row2

仅显示最新状态，您需要替换现有的HTML。最简单的更改是致电：

$('#test_table').html(content)

使用此代码，第二次触发回调后，输出将如下所示：

row1
row2

Fire-base更新后，从网站表中删除旧数据

1 个答案: