在帖子中加载评论

Question

假设我的 Firebase 数据库中有这个结构

编辑： 我的 JSON 结构如下所示：

{
  ad-comments:{
    48a047b7-28a2-4037-925c-2a809b8d4445:{
      -K4iGKXbniQZUi4r1SW7:{
         Comment:""
         Email:""
         Date:""
         Submitter:""
         ID:""
      }
      -K4hxcKuuxcwuhScPR_v:{...}    
    }
    eeb082e5-59ed-4c3b-8fcd-5af24a2bcada:{...}    
  }
  users:{
    48a047b7-28a2-4037-925c-2a809b8d4445:{
      text:""
      name:""
      email:""
      desc:""
      phone:""
    }
    444198db-1052-4d8d-a1cd-c7e613fbe7c9:{...}  
  }
}

在控制器中，我正在检索用户（每个用户都有一个属性帖子）以使用 $firebaseArray 和 ng-repeat 将它们显示在视图上，如下所示：

var ref = new Firebase ("https://url.firebaseio.com/users");
$scope.posts = $firebaseArray("ref");

现在在视图中，我只是使用 ng-repeat 来遍历它们

<div ng-repeat="post in posts">

  <div>{{post.name}}</div>
  <div>{{post.text}}</div>

  <div>Comments:<div>
     <div><input type="text" ng-model="comment"></div>
     <div><button ng-click="addComment(post, comment)">Add</button></div>
</div>

所以现在的问题是，当每个帖子位于不同节点时，我如何进行查询以请求每个帖子的所有 cmets，我按 ID 存储它们，但仍然不知道该怎么做。

在我将 cmets 存储在每个用户内部并且可以在每个帖子上显示 cmets 之前，但我遇到了安全规则问题，因为我已指定用户只能修改其自己的内容而不是其他人，而将 cmets 留在用户内部不允许其他人使用 cmets，所以我不得不更改并将 cmets 放在不同的节点中。

Answer 1

您的数据保持平稳，这太棒了！

您还在两个位置之间使用共享密钥，这意味着您已经完成了 90% 的路程。

有多种方法可以处理这种情况，但using .$extend() in AngularFire 提供了一个优雅的解决方案。

下面的代码示例使用Angular Styleguide，所以如果您对代码不熟悉，请不要担心。

Here's the full demo on JSBin，以下是创建它的步骤。

我们希望为每个用户加载 cmets。我们将首先创建一个通过uid 获取ad-comments 的工厂：

function UserCommentsArray($firebaseArray, rootRef) {
  return function UserCommentsArray(uid) {
    var userCommentsRef = rootRef.child('ad-comments').child(uid);
    return $firebaseArray(userCommentsRef);
  };
}

现在我们将使用$firebaseArray.$extend() 创建一个自定义同步数组。

function UsersArray($firebaseArray, rootRef, userCommentsArray) {
    return $firebaseArray.$extend({
      $$added: function(snap) {
        var user = snap.val();
        user.$id = snap.key();
        user.comments = userCommentsArray(snap.key());
        return user;
    }
  });
}

每次将一个项目添加到数组中时，我们都会创建一个用户对象并添加来自userCommentsArray 的 cmets。

现在在我们的控制器代码中，我们可以简单地注入 usersArray 并绑定到页面。

function MyCtrl($scope, rootRef, usersArray) {
  var usersRef = rootRef.child('users');
  $scope.users = usersArray(usersRef);
}

在页面上显示此数据需要更改模板：

  <div ng-controller="MyCtrl">

    <div ng-repeat="user in users">

      <div>{{user.name}}</div>

      <ul ng-repeat="comment in user.comments">
        <li>{{ comment.text }}</li>
      </ul>

      <div>Comments:</div>
      <div>
        <input type="text" ng-model="newComment">
      </div>

      <div>
        <button 
          ng-click="addComment(user, newComment)">Add
        </button>
      </div>

    </div>
  </div>

在用户下面添加 cmets 是通过找到用户然后在 cmets 数组上调用 $add() 来完成的。

function MyCtrl($scope, rootRef, usersArray) {
  var usersRef = rootRef.child('users');
  $scope.users = usersArray(usersRef);
  $scope.addComment = function (user, newComment) {
    var userRecord = $scope.users.$getRecord(user.$id);
    userRecord.comments.$add({ text: newComment });
  };
}

Answer 2

我不是 Firebase 专家，但我认为您应该考虑如何为帖子与其 cmets 之间的连接建模。 我可以想到两种方法：

1. 帖子实体将有一个附加字段：

   列出commentIds

2. 评论实体将持有帖子的 ID

我推荐第一种方法，因为通常我们希望所有者实体（在本例中为 Post 实体）保留其子实体（评论）

现在，当您检索 Post 时，请确保使用 cmets Id 检索其所有 cmets。