Question

我正在使用Firebase作为后端处理排行榜。他们已经给出了本教程 - https://www.firebase.com/tutorial/#session/e5u73mr8wvp

我想要帮助解释以下代码行以及它如何保持元素排序。

if (prevScoreName === null) {
      $("#leaderboardTable").append(newScoreRow);
    }
    else {
      var lowerScoreRow = htmlForPath[prevScoreName];
      lowerScoreRow.before(newScoreRow);
    }

处理＆＃39;分数的功能已添加＆＃39;，从中获取此代码段 -

function handleScoreAdded(scoreSnapshot, prevScoreName) {
    var newScoreRow = $("<tr/>");
    newScoreRow.append($("<td/>").append($("<em/>").text(scoreSnapshot.val().name)));
    newScoreRow.append($("<td/>").text(scoreSnapshot.val().score));

    // Store a reference to the table row so we can get it again later.
    htmlForPath[scoreSnapshot.key()] = newScoreRow;

    // Insert the new score in the appropriate place in the table.
    if (prevScoreName === null) {
      $("#leaderboardTable").append(newScoreRow);
    }
    else {
      var lowerScoreRow = htmlForPath[prevScoreName];
      lowerScoreRow.before(newScoreRow);
    }
  }

我建议，有关更多信息，请查看上面给出的教程链接，并逐步解释我在此之前发布的上述代码段。

Answer 1

子项添加，更改和移动的回调传递第二个参数，其中包含上一个子项的键。这是代码能够对元素进行排序的方式。

每个孩子都按照升序排列在Firebase上，因为这些孩子的优先级等于他们的分数，这就是为什么在代码中，没有前一个孩子的孩子被附加到底部。这样做是为了使表格看起来按降序排序，因为排行榜应该是。

以下是一些更好的评论来解释发生了什么。

if (prevScoreName === null) {
  // This child has no child before it, which means it has the lowest score.
  // Append it to the bottom of the table.
  $("#leaderboardTable").append(newScoreRow);
}
else {
  // This child has a child before it with a lower score. Find that previous
  // child in the DOM so we can insert the new child above it.
  var lowerScoreRow = htmlForPath[prevScoreName];
  lowerScoreRow.before(newScoreRow);
}

动态添加新元素后对元素进行排序

1 个答案: