Как обновить область просмотра после удаления данных из облачного интерфейса Firestore, не обновляя страницу

Question

Я обновляю форму, используя jQuery, и когда я удаляю данные из интерфейса Firestore, они автоматически не отражаются в моем окне просмотра без обновления страницы. Я ищу способ получать обновления данных в режиме реального времени от Cloud Firestore.

 //Update button function
$('.save-button').on('click', function (event) {
    $('train-table').empty();
    event.preventDefault();
    //takes in form inputs
    var timetable = {
        name: $('.name-input').val(),
        destination: $('.destination-input').val(),
        frequency: $('.frequency-input').val(),
    }

    // Add new documents with a generated id.
    var addDoc = firestore
        .collection('train-schedule')
        .add({ timetable })
        .then(function (ref) {
            try {
                console.log("Status- Saved with ID: ", ref.id);
            } catch (error) {
                console.log("Got an error", error);
            }
        });
});
//get real time updates
getRealTimeUpdates = function () {
    trainCollection.onSnapshot(function (snapshot) {
        snapshot.forEach(doc => {
            var myData = doc.data().timetable;
            console.log("Train Id: ", doc.id);
            $(".train-table").append(
                "<tr><td id='name-col'>" + myData.name +
                "<td id='destination-col'>" + myData.destination +
                "<td id='frequency-col'>" + myData.frequency + "</td></tr>");
        });
    }, function (errorObject) {
        console.log("The read failed: " + errorObject.code);
        });
}
getRealTimeUpdates();

});

Я ожидаю обновления области просмотра при удалении данных из интерфейса Firestore.

Answer 1

Насколько я понимаю, вы только добавляете данные в свой HTML.Поэтому, когда есть какие-либо изменения (даже если документ удален), вы просто добавляете HTML для всех оставшихся документов в конец таблицы.

Простое решение - очистить таблицу перед повторным рендерингом ее содержимого:

trainCollection.onSnapshot(function (snapshot) {
    $(".train-table").clear(); // clear the existing documents before rerendering
    snapshot.forEach(doc => {
        var myData = doc.data().timetable;
        console.log("Train Id: ", doc.id);
        $(".train-table").append(
            "<tr><td id='name-col'>" + myData.name +
            "<td id='destination-col'>" + myData.destination +
            "<td id='frequency-col'>" + myData.frequency + "</td></tr>");
    });
}, function (errorObject) {
    console.log("The read failed: " + errorObject.code);
});

Более эффективным способом было бы на самом деле проверить, что было изменено, посмотрев на QuerySnapshot.docChanges и сделать более детальные обновления HTML на основе этого.Также см. Документацию о прослушивании изменений между снимками .