如何使用Firebase & AngularJS创建注释线程？
提问于 2015-10-22 14:39:46
我使用AngularJS和Firebase创建了Reddit克隆。我正致力于允许对评论发布评论(一个评论线程)。Firebase不喜欢使用嵌套数组，它更喜欢扁平的结构。我发现了使用Firebase创建嵌套注释的这个例子，但是它使用jQuery，我真的不清楚如何‘转换’。
如何创建“嵌套”(线程)注释而不实际使用嵌套数组？
--这是我的注释控制器(称为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);
};
});和这是我的邮政服务(与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;
});
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-10-22 20:55:04
DOM和注释线程都是树数据结构。HTML是为支持树而构建的，但是将它们存储在数据库中是一个常见的问题。解决此问题的一个解决方案是使用邻接表。
在这个列表中，每个资源，或者在本例中的注释，都会存储一个与其嵌套在创建“平面”数据结构下的注释的parent_id相同的id。
重要的是要承认Firebase使用Mongo，这是一个分层数据库，因此可以“嵌套”数据；但是，这是创建者的建议不要，所以让我们继续使用“平面”方法。
考虑到我们现在有一个“平面”数据结构，我们仍然需要将其转换为嵌套的数据结构，这样它就可以很好地呈现给DOM。这是一个关于如何从JavaScript中的平面数据结构构建树的JavaScript，还有一个同样效果的图书馆。
最后，一旦您有了嵌套的注释或注释线程，我建议您按照这个博客帖子构建一个嵌套的、递归的角指令，将其呈现给DOM。
希望这能有所帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/33291948
复制相关文章
点击加载更多
腾讯云开发者
