Question

我第一次使用Firebase编写了一个Web应用程序，但我无法理解从Firebase检索数据和更新预先存在的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级别的下一级孩子。当我添加新节点时，它会按预期将新节点附加到列表中。当我尝试使用时：

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


});

到目前为止，我没有开发更新现有li的代码，而是总是添加新的代码。例如，如果项目的Name在Firebase中更新，我将如何转到正确的li并更改其.html()？使用Firebase JSON对象构建可以轻松更新的html元素的最佳做法是什么？

Answer 1

在这种情况下，我通常会在生成的HTML上放置一个id，允许我将其与Firebase中的子节点进行匹配。 E.g。

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

然后，当您收到child_changed（或child_removed或child_moved）事件时，您可以查找现有元素并更新/删除/移动它：

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

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

1 个答案: