如何使用 Firebase 和 AngularJS 创建评论线程？

Question

我使用 AngularJS 和 Firebase 创建了一个 Reddit 克隆。我正在努力允许对评论（评论线程）发表评论。 Firebase 不喜欢使用嵌套数组，它更喜欢扁平结构。我发现 this example 使用 Firebase 创建嵌套评论，但它使用 jQuery，我真的不清楚如何 'translate'。

如何在不实际使用嵌套数组的情况下创建 "nested"（线程）注释？

这是我的评论控制器（称为PostViewCtrl）：

'use strict';

app.controller('PostViewCtrl', function ($scope, $routeParams, Post, Auth) {

  $scope.user = Auth.user;
  $scope.signedIn = Auth.signedIn;
  $scope.post = Post.get($routeParams.postId);

  $scope.comments = Post.comments($routeParams.postId);

  $scope.addComment = function () {
    if(!$scope.commentText || $scope.commentText === '') {
      return;
    }
    var comment = {
      text: $scope.commentText,
      creator: $scope.user.profile.username,
      creatorUID: $scope.user.uid
    };

    $scope.comments.$add(comment);
    $scope.commentText = '';
  };

  $scope.deleteComment = function (comment) {
    $scope.comments.$remove(comment);
  };

});

这是我的 Post 服务（与 Firebase 通信）：

'use strict';

app.factory('Post', function ($firebase, FIREBASE_URL) {
  var ref = new Firebase(FIREBASE_URL);
  var posts = $firebase(ref.child('posts')).$asArray();

  var Post = {
    all: posts,
    create: function (post) {
      return posts.$add(post).then(function(postRef) {
        $firebase(ref.child('user_posts').child(post.creatorUID))
                          .$push(postRef.name());
        return postRef;
      });
    },
    get: function (postId) {
      return $firebase(ref.child('posts').child(postId)).$asObject();
    },
    delete: function (post) {
      return posts.$remove(post);
    }, 
    comments: function (postId) {
      return $firebase(ref.child('comments').child(postId)).$asArray();
    }

  };

  return Post;
});

Answer 1

DOM 和评论线程都是 tree data structures. HTML is built to support trees, but it is a common problem to store them in databases. One solution to this problem is to using an adjacency list。

在此列表中，每个资源，或在本例中为评论，将存储一个 parent_id，它与嵌套在其下的评论的 id 相同——创建一个 "flat" 数据结构。

重要的是要承认 Firebase 使用 Mongo，这是一个分层数据库，因此可以 "nest" 数据；然而，这是 advised against 创作者的作品，所以让我们坚持 "flat" 方法。

鉴于我们现在有一个 "flat" 数据结构，我们仍然需要将其转换为嵌套数据结构，以便它可以很好地呈现给 DOM。这是具有相同效果的 example of how to build a tree from a flat data structure in JavaScript and here's a library。

最后，一旦您有了嵌套的评论或评论线程，我建议您按照此 blog post 在 angular 中构建嵌套的递归指令以将其呈现给 DOM.

希望对您有所帮助！

如何使用 Firebase 和 AngularJS 创建评论线程？

How to create a comment thread using Firebase & AngularJS?

angularjs

firebase