Polymerfire dom-repeat with Firebase objects

Question

我希望能夠顯示所有的FirstName和ZipCodes的列表。我的數據如下所示：

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

和Polymerfire的火力文件看起來像這樣

<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]}); 
} 

沒有錯誤rs，但我也沒有得到DOM

Answer 1

dom-repeat將一個數組作爲items屬性。你可以做這樣的事情：

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

... 

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

Answer 2

你忘了回報：

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

它的正常工作與我的數據顯示就好了。

Answer 3

更好地執行（也包括如果需要的關鍵的名稱）可以在這裏找到：

How to use dom-repeat with objects instead of arrays in Polymer 1.0?

而且實現了雙向綁定：

Two way binding for Firebase arrays in dom-repeat

希望這在Polymer 2.0中得到實施，因爲Firebase正在廣告宣傳，但是隨着最佳實踐聚合體和最佳實踐Firebase的使用出現問題。

Answer 4

只需使用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 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>