firebase - Polymerfire dom-repeat 与 Firebase 对象

Question

我希望能够显示所有FirstName和的列表ZipCodes。我的数据如下所示：

/user
|
|__INAxzxWKQrSAfA7tapV0c08YvfJ3
|   |____FirstName:"James"
|   |____ZipCode:"90210"
|
|__ANAczxWKQrEAfA7tapV0c08YvfX6
    |____FirstName:"Simon"
    |____ZipCode:"40213"

Polymerfire 的 firebase 文档看起来像这样

<firebase-document
    app-name="contacts"
    path="/user"
    data="{{allUsers}}">
</firebase-document>

我的 dom 重复就像

<template is="dom-repeat" items="{{_makeArray(allUsers)}}">
    <div class="profile card">
        {{item.FirstName}} 
    </div>
</template>

我添加了功能

_makeArray: function(items) {
  return Object.keys(items).map(function (key) {items[key]});
}

没有错误，但我对 DOM 也一无所获

Answer 1

只需使用 firebase-query 而不是 firebase-document。你会得到一个数组回来。

<firebase-query
  app-name="contacts"
  path="/user"
  data="{{allUsers}}">
</firebase-query>

<template is="dom-repeat" items="{{allUsers)}}">
  <div class="profile card">
    {{item.FirstName}} 
  </div>
</template>

Answer 2

dom-repeat 将数组作为 items 属性。你可以这样做：

<template is="dom-repeat" items="[[makeArray(allUsers)]]">

...

makeArray: function(items) {
  return Object.keys(items).map(function (key) {items[key]});
}

Answer 3

可以在这里找到更好的实现（如果需要，还包括密钥的名称）：

如何在 Polymer 1.0 中对对象而不是数组使用 dom-repeat？

也是双向绑定的实现：

dom-repeat 中 Firebase 数组的两种方式绑定

希望这可以在 Polymer 2.0 中实现，因为 Firebase 正在被宣传，但同时使用最佳实践 Polymer 和最佳实践 Firebase 存在问题。

Answer 4

你忘记了回报：

_makeArray: function(items) {
  return Object.keys(items).map(function (key) { return items[key]; });
}

它适用于我，数据显示得很好。

Answer 5

用于firebase-query返回可以传递给的对象数组dom-repeate。

  <firebase-query
   path="/user"
   data="{{allUsers}}"
   </firebase-query>

这dom-repeat

添加属性as="data"
添加属性data.$key

<template is="dom-repeat" items="{{_makeArray(allUsers)}}" as="data">
    <div class="profile card">
        {{data.$key}} 
        {{data.FirstName}} 
    </div>
</template>