应该如何在 Firebase 的 Web 应用程序中显示和更新数据？

Question

我是第一次使用 Firebase 编写 Web 应用程序，我无法理解从 Firebase 检索数据和更新 pre-existing HTML 标签的最佳实践。

例如：

projectRef.on('child_added', function(snapshot) {

    $('#project_ul').append('<li data-project="'+snap.Name+'"><img src="'+img+'" />' + 
       '<span class="li_name">'+snap.Name+'</span><span class="li_desc">'
        +snap.Description+'</span><span class="li_date">Expected End Date: '
        +snap.DueDate+'</span></li>');

});

努力在我的 Firebase 中从我的 Users 级别获得下一个级别 children。当我添加新节点时，它会按预期将新节点附加到列表中。当我尝试使用时：

projectRef.on('child_changed', function(snapshot) {


});

到目前为止，我未能开发更新现有 li 的代码，而是它总是附加新的。例如，如果项目的 Name 在 Firebase 中更新，我将如何转到正确的 li 并更改其 .html()？在 Firebase JSON objects 中构建可以轻松更新的 html 元素的最佳实践是什么？

Answer 1

在这种情况下，我通常做的是在生成的 HTML 上放置一个 id，这样我就可以将它与 Firebase 中的子节点相匹配。例如

$('#project_ul').append('<li id="'+snap.key()+'" ...

然后当你得到一个child_changed（或child_removed或child_moved）事件时，你可以查找现有元素并update/remove/move它：

project.on('child_changed', function(snapshot) {
  var li = $('#'+snapshot.key());
  li.html(...
});

应该如何在 Firebase 的 Web 应用程序中显示和更新数据？

How should data be displayed and updated in a Webapp from Firebase?

javascript

jquery

firebase