Question

我是一名新的web开发者，但我一直在研究Polymer with 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>

我希望这会有所帮助

使用polymerfire显示数据

1 个答案: