【问题标题】:A more effective way to list things from Firebase with Angularfire?使用 Angularfire 从 Firebase 中列出内容的更有效方法?
【发布时间】:2013-12-16 07:40:21
【问题描述】:

我正在为 D&D 风格的 RPG 开发基于 Web 的角色创建工具。我正在尽最大努力从我的 firebase 数据库中列出“种族”。当前结构如下:

|-ironkingdoms
|--Race
|---Dwarf
|-----RaceName:Dwarf
|-----Starting Attribuites
|------PHY:7
|------STR:8
|------POI:5
|---Human
|-----RaceName:Human
|-----Starting Attributes
|------PHY:6
|------STR:7
|------POI:4

你明白了......我把“RaceName”放在那里,因为我一生都无法弄清楚如何让它列出“Race”的所有孩子。这是我的代码:

http://plnkr.co/edit/GhQn1e9bdCdAnKNsJZ1K?p=preview

<html ng-app="myapp">
        <head>
            <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js'></script>
            <script src='https://cdn.firebase.com/v0/firebase.js'></script>
            <script src='https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js'></script>
        </head>
        <body ng-controller="MainCtrl">
            Data:
            <div ng-repeat="item in data">{{item.RaceName}}</div>
            <p>
            <div>Data loaded: {{dataLoaded}}</div>
            <p>
            Messages:
            <div ng-repeat="msg in messages">{{msg}}</div>
            <script>
                var app = angular.module('myapp', ['firebase']);

                app.controller('MainCtrl', function($scope, $firebase) {
                  var ref = new Firebase("https://<yourFirebase>.firebaseio.com/Race");
                  $scope.data = $firebase(ref);
                  $scope.dataLoaded = "Not yet!";
                  $scope.messages = [];

                  $scope.data.$on("loaded", function() {
                    var keys = $scope.data.$getIndex();
                    ["Race"].forEach( function(element) {
                      $scope.messages.push("Test for " + element + ": " + (keys.indexOf(element) !== -1));
                    });
                    $scope.dataLoaded = "Yep!";
                  })
                });     
            </script>
        </body>
    </html>

到目前为止,当我使用“RaceName”时,它似乎可以正常工作,但无论何时我将 /Race 从路径中移除并尝试列出“race”的孩子,它似乎都不起作用。我所掌握的少量数据库知识来自于 SQL 背景。所以这对我来说有点困惑。任何帮助,将不胜感激!

编辑: 在我的问题中添加更多内容。不确定它会得到回答,但我宁愿不为此提出一个新问题。

在以下情况下如何使用 ng-repeat:

    <table>(Work in progress) Table with Rows of AttributeType with columns of AttributeGroup
  <thead>
    <tr>
      <th>Attribute Set</th>
      <th>Starting Attributes</th>
      <th>Hero Limit</th>
      <th>Veteran Limit</th>
      <th>Epic Limit</th>
    </tr>
  </thead>
  <tbody ng-model="refAttributes">
    <tr>
      <td>AGI</td>
      <td>{{refAttributes['Starting Attributes'].AGI}}</td>
      <td>{{refAttributes['Hero Limit'].AGI}}</td>
      <td>{{refAttributes['Veteran Limit'].AGI}}</td>
      <td>{{refAttributes['Epic Limit'].AGI}}</td>
    </tr>
    <tr>
      <td>ARC</td>
      <td>{{refAttributes['Starting Attributes'].ARC}}</td>
      <td>{{refAttributes['Hero Limit'].ARC}}</td>
      <td>{{refAttributes['Veteran Limit'].ARC}}</td>
      <td>{{refAttributes['Epic Limit'].ARC}}</td>
    </tr>
    <tr>
      <td>INT</td>
      <td>{{refAttributes['Starting Attributes'].INT}}</td>
      <td>{{refAttributes['Hero Limit'].INT}}</td>
      <td>{{refAttributes['Veteran Limit'].INT}}</td>
      <td>{{refAttributes['Epic Limit'].INT}}</td>
    </tr>
    <tr>
      <td>PER</td>
      <td>{{refAttributes['Starting Attributes'].PER}}</td>
      <td>{{refAttributes['Hero Limit'].PER}}</td>
      <td>{{refAttributes['Veteran Limit'].PER}}</td>
      <td>{{refAttributes['Epic Limit'].PER}}</td>
    </tr>
    <tr>
      <td>PHY</td>
      <td>{{refAttributes['Starting Attributes'].PHY}}</td>
      <td>{{refAttributes['Hero Limit'].PHY}}</td>
      <td>{{refAttributes['Veteran Limit'].PHY}}</td>
      <td>{{refAttributes['Epic Limit'].PHY}}</td>
    </tr>
    <tr>
      <td>POI</td>
      <td>{{refAttributes['Starting Attributes'].POI}}</td>
      <td>{{refAttributes['Hero Limit'].POI}}</td>
      <td>{{refAttributes['Veteran Limit'].POI}}</td>
      <td>{{refAttributes['Epic Limit'].POI}}</td>
    </tr>
    <tr>
      <td>PRW</td>
      <td>{{refAttributes['Starting Attributes'].PRW}}</td>
      <td>{{refAttributes['Hero Limit'].PRW}}</td>
      <td>{{refAttributes['Veteran Limit'].PRW}}</td>
      <td>{{refAttributes['Epic Limit'].PRW}}</td>
    </tr>
    <tr>
      <td>SPD</td>
      <td>{{refAttributes['Starting Attributes'].SPD}}</td>
      <td>{{refAttributes['Hero Limit'].SPD}}</td>
      <td>{{refAttributes['Veteran Limit'].SPD}}</td>
      <td>{{refAttributes['Epic Limit'].SPD}}</td>
    </tr>
    <tr>
      <td>STR</td>
      <td>{{refAttributes['Starting Attributes'].STR}}</td>
      <td>{{refAttributes['Hero Limit'].STR}}</td>
      <td>{{refAttributes['Veteran Limit'].STR}}</td>
      <td>{{refAttributes['Epic Limit'].STR}}</td>
    </tr>
  </tbody>
</table>

【问题讨论】:

    标签: angularjs firebase angularfire


    【解决方案1】:

    第 9 行应该变成

    <div ng-repeat="(raceName, item) in data">{{raceName}}</div>
    

    ngRepeat指令支持通过上述方式获取key和value。

    【讨论】:

      【解决方案2】:

      Dat Chu 的回答肯定会让您知道比赛名称,但我想提出一个与您如何构建数据相关的替代方案。根据您的应用程序的最终大小,这可能很重要,也可能不重要 - 如果您只会在 /Race 位置下拥有少量数据,那么这没什么大不了的。

      您当前的结构需要下载所有比赛数据(包括子属性)才能列出所有比赛。另一种选择是将简单的种族列表存储在另一个位置,例如 ironkingsdoms.firebaseio.com/AvailableRaces/,其中只有一个简单的种族名称数组。这将允许您仅获取该列表,将其显示给您的用户,然后他们可以选择一场比赛,然后您可以针对 /Race/{racename}/ 构造一个查询,并且只提取该数据。

      再说一遍 - 如果您只有几场比赛并且整体对象尺寸很小,那么预先下载所有内容可能还不错(无论如何,Firebase 都会将其流式传输给您)。但是,如果你最终遇到了这样一种情况,即你有数百场比赛,而每场比赛的下面都有一堆数据,那么你可能会不必要地消耗你的火力基地带宽。

      Firebase 发布了一篇关于非规范化的精彩文章,您可能会觉得有趣 @https://www.firebase.com/blog/2013-04-12-denormalizing-is-normal.html

      【讨论】:

      • 很高兴知道这一点。我还不太擅长对数据进行非规范化。我当前的问题是,如果我添加具有属性的比赛,我宁愿不必在其他地方更新带有该比赛名称的列表。我想要一个真正的来源。非规范化似乎很难,因为您似乎几乎必须复制一些数据。我只是还没有赶上学习曲线,因为这是我第一次尝试这样的平面数据。
      • 您复制数据以加快速度。例如,在内存中缓存 db 查询的结果是一种数据复制形式,如果您不小心缓存失效,事情可能会不同步。由单元测试支持的精心设计的服务在管理数据不同步的风险方面大有帮助
      • 我遇到了类似的问题,想象一下如果您的数据集达到 50MB,您是否希望您的用户在真正做任何事情之前必须下载整个 50MB? (大幅减速)firebase 的目标是速度,所以我不得不承认这可能是一个更好的方法。
      • 我同意@onaclov2000 的观点,因为我有类似的问题,我的一些数据包括图像,数据加载需要很长时间,因为它提取了大约 20MB 的数据,不适合移动应用程序。所以非规范化是一个很好的方法。
      猜你喜欢
      • 2016-03-31
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2022-01-12
      • 2012-05-10
      • 1970-01-01
      相关资源
      最近更新 更多