使用Firebase中的对象列表更新DOM

Question

我目前有一个web应用程序，它使用Firebase实时数据库存储数据，该数据库使用对象的对象(列表(来更新DOM。对象列表根据用户选择的一些规则进行排序和分组。

我目前正在做的是，每次用户添加、删除或修改数据时，都会触发一个值上回调，并在回调中返回整个列表以重新创建列表。然后对列表进行排序，清除DOM元素的innerHTML，并创建新元素。这意味着，即使用户更新了一个不影响排序或分组的属性，也会重新创建整个DOM。这就是我正在努力改进的地方。

如何改进流程以减少被删除和重新创建的DOM的数量？

当前伪码(按要求(：

database.ref().on(“value”, function (snapshot) {
let val = snapshot.val();
// Group Objects
let groups = groupObjects(val.list, val.groupBy);
// Sort Groups
let sortedGroups = groups.map(function (group) { 
return sortObjects(group, val.sortBy)
});
// Update DOM
listElement.innerHTML = “”;
sortedGroups.forEach(function (group) {
let row = document.createElement(“div”);
group.forEach(function (item) {
row.appendChild(createItemElement(item));
});
listElement.appendChild(row);
});
});

正如您所看到的，简单地通过获取发生更改的侦听器来添加或替换元素是不够的，因为这可能会完全改变元素的排序方式。

Answer 1

听起来您有一个on("value"侦听器，每次触发时都会在其中重建整个DOM。

ref.on("value", function(snapshot) {
// Clear the DOM
snapshot.forEach(function(child) {
// Add to the DOM
})
})

或者，您可以使用在各个子节点上触发的on("child_侦听器，并对每个节点进行单独的DOM修改。

ref.on("child_added", function(snapshot, peviousChildKey) {
// Add to the DOM
})
ref.on("child_changed", function(snapshot, peviousChildKey) {
// Update in the DOM
})
ref.on("child_removed", function(snapshot) {
// Remove from the DOM
})
ref.on("child_moved", function(snapshot, peviousChildKey) {
// Move in the DOM
})