Как проверить наличие измененных значений в базе данных Firebase в реальном времени и заставить их отображаться в таблице HTML?

Question

Мне удалось удалить записи из таблицы после ее удаления в базе данных, а также я могу добавить записи после того, как они были отредактированы. как проверить, есть ли данные в html-таблице, используя базу данных Firebase в реальном времени? Сейчас я ищу, как искать живые изменения в базе данных.

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>';//column2
    content += '<td>' + data.TimeEffected + '</td>'; //column1 
    content += '<td>' + data.DateEffected + '</td>'; //column1
    content += '<td>' + data.Successful + '</td>'; //column1
    content += '</tr>';
    $('#ex-table').append(content);

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

});

Я пытался использовать это:

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

Я пытался поместить его в метод удаления, но это не удалось.

Answer 1

$('#'+snapshot.key) получает правильный элемент в HTML, но метод change() jQuery не делает то, что вы думаете, что он делает.Прочитайте связанную документацию, чтобы узнать, что она на самом деле делает.

Если вы подумаете, если на мгновение это имеет смысл: как встроенный метод из jQuery узнает, как обновить вашу HTML-структуру?

Только ваш код знает, какой HTML он создал для данных в снимке.Вам нужно будет скопировать (частично) ваш код, который создает HTML-код в обратном вызове child_added, в обратный вызов child_changed.

Примерно так:

database.on('child_changed', function(snapshot){
    var data = snapshot.val();

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

    $('#'+snapshot.key).replaceWith(content)
});