来自二级对象的Firebase $ id

Question

所以我在firebase中有这个例子

clients {
   //clients with unique keys {
       invoices: {
         // Invoices with unique Keys
       }
   }
}

我正在用一个ref返回所有这些,如下所示:

.controller('singleClientController', function($scope, $firebaseObject, fbUrl, $routeParams) {

    var id = $routeParams.id;

    var singleRef = new Firebase(fbUrl+'/clients/'+id);
    var client = this;

    client.details = $firebaseObject(singleRef);

})

所以在我的HTML中,我试图返回$id客户端和发票.我能够让客户端没有问题{{client.details.$id}}但是当我尝试用发票ID {{invoice.$id}}做同样的事情时我什么也得不到.

发票通过foreach显示如下:

<tr ng-repeat="invoice in client.details.invoices">
     <td>
         <a href="#/invoices/details/{{invoice.$id}}/{{client.details.$id}}">
            {{invoice.settings.number}}
         </a>
     </td>
     ...
</tr>

是因为发票在客户内吗？如果是这样,您将如何返回发票的ID？这让我疯了!请帮忙!

为了更好地理解我的firebase设置,这里是我正在谈论的截图.

Answer 1

tl; dr - 在Firebase中,它是理想的平面数据结构.

JSBin示例

在您的情况下,您有在客户端下嵌套的发票.

{
   "clients": {
      "1": {
         "name": "Alison",
         "invoices": {
            "0001": {
              "amount": 500
              "paid": true
            }
         }
      }
   }
}

这感觉很自然,因为发票很好地分组在适当的客户下面.但是,这可能会导致与Firebase同步数据时性能下降.Firebase会读取节点下的所有数据.

这意味着每次您阅读时,/clients/1您也会通过网络下载发票.即使您只需要客户的名字,您也可以获得发票.

解决方案是扁平化您的数据结构.

{
   "clients": {
      "1": {
        "name": "Alison"
      }
   },
   "clientInvoices": {
     "1": {
        "0001": {
          "amount": 500
          "paid": true
        }
     }
   }
}

掌握这里的重要部分是共享密钥.

在这个例子中,关键是1.这是为了简单起见.实际上你可能会使用.push()id.

通过使用此模式,您仍然可以通过简单地知道其密钥来检索客户端的所有发票.这也使客户与发票分离.

作为控制器代码的额外好处,ng-repeat将更容易.

在您的情况下,您应该从a切换$firebaseObject到a $firebaseArray为发票.我们甚至可以创建一个帮助工厂,通过客户的ID获取发票.

.factory('invoices', function(fbUrl, $firebaseArray) {
   return function(clientId) {
      var ref = new Firebase(fbUrl).child('clientInvoices').child(clientId);
      return $firebaseArray(ref);
   }
})

// While we're at it, lets create a helper factory for retrieving a
// client by their id
.factory('clients', function(fbUrl, $firebaseObject) {
    return function(clientId) {
       var ref = new Firebase(fbUrl).child('clients').child(clientId);
       return $firebaseObject(ref);
    }
})

现在将助手工厂注入您的控制器并使用它$routeParams.id来检索客户的发票:

.controller('singleClientController', function($scope, $routeParams, invoices, clients) {

    $scope.client = clients($routeParams.id);
    $scope.clientInvoices = invoices($routeParams.id);

})

现在将它绑定到您的模板是一件轻而易举的事:

<tr ng-repeat="invoice in clientInvoices">
     <td>
         <a href="#/invoices/details/{{invoice.$id}}/{{client.$id}}">
            {{invoice.settings.number}}
         </a>
     </td>
     ...
</tr>