javascript - 在 Firebase 中制作用于更新数据的 Web 表单

Question

我正在制作一个界面来操作 Firebase 中的数据。我设法制作了一个插入新数据的表单，我有一个检索到的数据列表，唯一缺少的是编辑/更新现有数据。

我正在使用 Foundation 6 来加快 HTML 和 CSS 的编码速度，并且我创建了一个当您单击名称时弹出的模式。另外，我让每个名字都有一个类，它是它们在 Firebase 中的子键，这样我就可以打开正确项目的数据。我被困在这里，我不知道如何以模态形式制作该表格以填充来自点击名称的数据。有人可以帮我一下吗？

这是我的代码:

      var ref = new Firebase("https://myname.firebaseio.com/data/users");
        ref.on("child_added", function(snapshot) {
          var key = snapshot.key();
          var data = snapshot.val();
          var name = data.name;
          var city = data.city;
          $("#results").append($("<li class=\"" + key + "\">" + "<a data-open=\"modal\">" + name + ", " + city + "</a></li>"));
          // this is for filling up the form with loaded data
          $(".name").val(name); 
          $(".name").focus(function(){
              $(this).val(name);
          });
        });

Answer 1

试试这个:

var ref = new Firebase("https://myname.firebaseio.com/data/users");
var data;
ref.on('value', function(snapshot) {
  data = snapshot.val();
  $("#results").empty();
  Object.keys(data).forEach(function(key) {
    var value = data[key];
    var name = value.name;
    var city = value.city;
    var li = $("<li class=\"" + key + "\">" + "<a data-open=\"modal\">" + name + ", " + city + "</a></li>");
    $("#results").append(li);
    li.click(function() {
      $('#name').val(name);
      $('#city').val(city);
      $('#key').val(key);
    });
  });
});
$('form').submit(function() {
  var key = $('#key').val();
  var name = $('#name').val();
  var city = $('#city').val();
  data[key].name = name;
  data[key].city = city;
  ref.set(data);
  return false;
});

JSFIDDLE