Question

我正在处理具有以下Firebase结构的项目：

user {
  score: 0,
  messages : {
    key1 { name: name, text: text }
    key2 { name: name, text: text }
    key...
  }
}

我目前有两个问题。第一个是确定用户是否有＆＃34;消息＆＃34;孩子，如果没有，那么给它一个（连同一个分数），这是我到目前为止提出的代码：

  ref.once('value', function (snapshot) {
    if (!snapshot.hasChild("messages")) {
        ref.set({
            score: 0,
            messages: 0
        });
    }
});

下一步是在数据被推送到子网后检索并显示来自孩子的消息，如下所示：

ref.child("messages").on('child_added', function (snapshot) {
    var message = snapshot.val();
    $('#messagesDiv').prepend(message.text ": " + message.name);
});

但这似乎并没有起作用。

这是我制作的fiddle。

我希望你们能帮助我解决这个问题！语法看起来正确，我阅读了文档以查找大部分当前代码。

提前致谢！

Answer 1

设置初始数据

hasChild的代码似乎运行正常。它没有多大意义。您添加的结构会导致：

user {
  score: 0,
  messages: 0
}

这与您在问题中绘制的结构不同：messages这里只是一个数字，而您希望它是一组消息。此外，此更改将不触发您的child_added处理程序，因为......您未将孩子添加到messages。

您从设计数据结构开始就做了正确的事情。下一步是确保您坚持使用该数据结构。因此，如果要添加初始消息，请以正确的结构添加消息：

ref.once('value', function (snapshot) {
    if (!snapshot.hasChild("messages")) {
        ref.set({
            score: 0,
            messages: { 0: { name: 'puf', text: 'welcome' }}
        });
    }
});

如果您修改小提琴，您会看到welcome消息确实显示在#messagesDiv。

我认为这种方法仍有缺陷。除非您真的想要添加欢迎消息，否则无需添加messages节点。我只需将score设置为0，并在用户输入第一条消息后添加messages节点：

ref.once('value', function (snapshot) {
    if (!snapshot.hasChild("messages")) {
        ref.set({ score: 0 });
    }
});

添加新消息

我注意到你的小提琴中还有以下代码：

$('#messageInput').keypress(function (e) {
    if (e.keyCode == 13) {
        var name = user;
        var text = $('#messageInput').val();
        // POST
        ref.child("messages").set({
            name: name,
            text: text
        });
        $('#messageInput').val('');
    }
});

输入处理很好，但是修改Firebase数据结构的代码再次不会跟随您开始提问的数据结构。如果我们执行此代码，数据结构将是：

user {
  score: 0,
  messages: {
      name: 'NotToBrag',
      text: 'asked 10 hours ago'
  }
}

如果不明显：此结构缺少关键 key1或您的结构。哦......它还覆盖了welcome消息。

当您将子节点添加到Firebase列表时，您几乎总是想要使用push：

        ref.child("messages").push({
            name: name,
            text: text
        });

通过这种微小的改变，数据结构变为：

user {
  score: 0,
  messages: {
      0: {
          name: 'puf',
          text: 'welcome'
      },
      '-Jh-aFN42nWef-FvgcfS': {
          name: 'NotToBrag',
          text: 'asked 10 hours ago'
      }
  }
}

所有这些（像往常一样）都是非常小的变化。但是他们一起确保你的情景严重受损。我用来排除故障的技巧是非常基本的，你可以把它们添加到你的武器库并学会使用它们。

调试技巧1：console.log数据结构

每当我第一次得到MCVE某个人的问题时，我会立即记录他们的数据结构：

new Firebase('https://your.firebaseio.com/').once('value', function(s) {
  console.log(s.val()); 
})

有时我可能将JSON字符串化：

new Firebase('https://your.firebaseio.com/').once('value', function(s) {
  console.log(JSON.stringify(s.val())); 
})

最后一个片段是获取数据结构以便在您的问题中使用的好方法。

该代码段仅显示一次数据结构，因此每次更改内容时都要继续运行此代码段。

调试技巧2：删除数据

您的整个hasChild代码段似乎旨在为用户设置初始数据结构。为了帮助测试，我经常删除数据：

new Firebase('https://your.firebaseio.com/myName').remove()

然后当你再次运行小提琴时，你可以看到hasChild - 使用代码的作用。

我经常在我的小提琴开头放置代码来清理（或以其他方式重置）我的测试数据，或者只是从浏览器的JavaScript控制台运行一个代码段。

如何使用.hasChild并使用Firebase检索孩子？

1 个答案:

设置初始数据

添加新消息

调试技巧1：console.log数据结构

调试技巧2：删除数据