angularjs - 如何使用 Firebase/AngularFire 从非规范化数据集中加载 (n>2) 级嵌套数据？

Question

给定一个非规范化的数据结构，如:

{
  "users" : {
    "-JMMXslDJkPYmgcwXUzP" : {
      "items" : [ "-JMMXYaWlg_ftL2sKsdp", ... ],
      "name" : "user0"
    },
    ...
  },
  "items" : {
    "-JMMXYac7EMZcr4LIL5u" : {
      "properties" : [ "-JMMWdpWig-L8oIqbeI1", ... ],
      "name" : "item0"
    },
    ...
  },
  "properties" : {
    "-JMMWdpe3WEyjnUM12o2" : {"name": "property0"},
    ...
  }
}

我目前正在像这样加载嵌套的 child :

<ul ng-init="users = $ref('users')">
    <li ng-repeat="user in users">
        <h1>{{ user.name }}</h1>
        <ul>
            <li ng-repeat="item_id in user.items" ng-init="item = $ref('items/'+item_id)">
                <h2>{{ item.name }}</h2>
                <ul>
                    <li ng-repeat="property_id in item.properties" ng-init="property = $ref('properties/'+property_id)">
                        <h3>{{ property.name}}</h3>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

这是显示只有 3 级深度嵌套数据的加载速度是多么难以忍受的 plunker:http://plnkr.co/edit/yrRx2FYJEc5BM1MaSQDe?p=preview

如何加速这些数据的加载/渲染？

请注意，解决方案发布 here (为每个集合而不是每个集合项创建一个引用)对我不起作用，因为我的任何/所有嵌套集合都太大了。

Answer 1

这里的问题是编译器。每次这些记录发生变化时，所有这些 ng-repeat 操作都会重新运行，并且数据会一次又一次地下载。相反，使用项目缓存。

自从我写了 an example of a user cache previously ，我将借用它并切换变量以匹配您的示例。您需要对其进行调整以处理属于每个用户的多个项目；原谅我的懒惰:

风景:

<li ng-repeat="user in users" ng-init="item = items.$load(user.item_id)">
    {{user.name}}: {{item.name}}
</li>

和 Controller :

// CONTROLLER

app.controller('ctrl', function ($scope, $firebase, itemCache) {
    $scope.users = $firebase(fb.child('users'));
    $scope.items = itemCache(fb.child('items'));
    $scope.$on('$destroy', $scope.items.$dispose);
});

app.factory('itemCache', function ($firebase) {
    return function (ref) {
        var cachedItems = {};
        cachedItems.$load = function (id) {
            if( !cachedItems.hasOwnProperty(id) ) {
                cachedItems[id] = $firebase(ref.child(id));
            }
            return cachedItems[id];
        };
        cachedItems.$dispose = function () {
            angular.forEach(cachedItems, function (item) {
                item.$off();
            });
        };
        return cachedItems;
    }
});