所以我在firebase中有这个例子
clients {
//clients with unique keys {
invoices: {
// Invoices with unique Keys
}
}
}
我正在使用一个参考文件返回所有这些:
.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设置,这里是我正在谈论的截图。
答案 0 :(得分:8)
tl; dr - 在Firebase中,理想的是拥有扁平的数据结构。
<强> JSBin Example 强>
在您的情况下,您将发票嵌套在客户端下。
{
"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
将更容易。
在您的情况下,您应该从发票的$firebaseObject
切换到$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>