用聚合物火力显示数据

我是一名新的web开发人员，但我一直在考虑将Polymer with Firebase作为后端。我只是尝试使用dom-repeat显示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>

来源

2016-09-06 Nelson.b.austin

您应该使用'火力点，query'元素，而不是一个'火力点，document'元素中的数据被“转换”到一个数组 – Alan

我认为一个火力查询是最适合的是，代替所述火力文件如下图所示：

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

然后你可以像你做的那样做你的dom重复：

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

我希望这有助于

来源

2017-03-22 09:45:02 theAuthor

用聚合物火力显示数据

回答

相关问题