我使用 AngularJS 和 Firebase 创建了一个 Reddit 克隆。我正在努力允许对评论(评论线程)发表评论。 Firebase 不喜欢使用嵌套数组,它更喜欢扁平结构。我找到了 this example使用 Firebase 创建嵌套评论,但它使用 jQuery,我真的不清楚如何“翻译”。
我如何在不实际使用嵌套数组的情况下创建“嵌套”(线程)注释?
这是我的评论 Controller (称为 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;
});
最佳答案
DOM 和评论线程都是 tree数据结构。 HTML 是为支持树而构建的,但是将它们存储在数据库中是一个常见的问题。此问题的一种解决方案是使用 adjacency list .
在此列表中,每个资源,或在本例中为评论,将存储一个 parent_id
,它与嵌套在其下的评论的 id
相同——创建一个“平面”数据结构。
重要的是要承认 Firebase 使用 Mongo,这是一个分层数据库,因此可以“嵌套”数据;然而,这是 advised against由创作者提供,所以让我们坚持“扁平化”方法。
鉴于我们现在有一个“平面”数据结构,我们仍然需要将其转换为嵌套数据结构,以便它可以很好地呈现给 DOM。这是一个 example关于如何从 JavaScript 中的平面数据结构构建树,这里是 library达到同样的效果。
最后,一旦您有了嵌套评论或评论线程,我建议您关注此 blog post关于构建嵌套的递归指令以将其呈现给 DOM。
希望这对您有所帮助!
https://stackoverflow.com/questions/33291948/