0

私は Web 開発者としては初心者ですが、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 に答える