使用polymerfire显示数据

Question

我是一个新的web开发人员，但我一直在研究以Firebase为后端的聚合物。我只是尝试使用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>

Answer 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>

我希望这能帮到你