0

我是一名网络开发人员，但我一直在研究以 Firebase 作为后端的 Polymer。我只是想使用 dom-repeat 显示来自 Firebase 的对象列表，但我完全迷失了。任何帮助将非常感激。

Firebase 结构：

{
  "gardens" : {
    "-KM0F2K0Nvioskfy4Nn8" : {
      "height" : 1,
      "width"
      "name" : "Flower Pot",
    },
    "-KM0F8kOvf-_Z17V5Tne" : {
      "height" : 4,
      "name" : "Raised Bed 1",
      "waterValveState" : false,
      "width" : 1
    },
    "-KM0FCKUa9PyuJPVDozK" : {
      "height" : 5,
      "name" : "BigGarden",
      "waterValveState" : false,
      "width" : 2
    },
    "-KM0P-8azA059tGpwiBk" : {
      "height" : 3,
      "name" : "Strawberries",
      "waterValveState" : false,
      "width" : 1
    },
    "-KM0PsSKHiH1xR-q_CzN" : {
      "height" : 2,
      "name" : "Tomatoes",
      "waterValveState" : false,
      "width" : 1
    },
    "-KM0aHqq1UT1IEFvoyFx" : {
      "height" : 1,
      "name" : "Green Beans",
      "waterValveState" : false,
      "width" : 1
    }
  }
}

聚合物代码：

<firebase-document
    app-name="garduino"
    path="/gardens"
    data="{{gardendata}}">
</firebase-document>

<div class="gardens">
    <template is="dom-repeat" items="{{gardendata}}" as="garden">
        <paper-card 
            heading="[[garden.name]]" 
            class="cyan">
        </paper-card>
    </template>
</div>

<script>
    Polymer({
        is: 'garduino-app',

        properties: {
            gardendata: {
                type: Object,
            }
        }
    });
</script>
4

1 回答 1

1

我认为 firebase 查询最适合它，而不是 firebase 文档，如下图所示：

<firebase-query
    id="query"
    app-name="garduino"
    path="/gardens"
    data="{{gardendata}}">
</firebase-query>

然后你可以像你一样做你的 dom-repeat：

<template is="dom-repeat" items="{{gardendata}}" as="garden">
    <paper-card 
        heading="[[garden.name]]" 
        class="cyan">
    </paper-card>
</template>

我希望这有帮助

于 2017-03-22T09:45:02.713 回答