オブジェクト内の配列を解析しているポリマーのdom-repeatエラー

Question

私の小さなプロジェクトのためのポリマーフレームワークを試してみること。次のオブジェクト

内部配列を解析 ポリマーDOM-繰り返しエラーが、私はエラーを取得しています。この設定では、私のポート設定宣言

<template> 
<paper-material elevation="-1"> 
    <template is="dom-repeat" items="{{roomConfig.ports}}"> 
    <div class="container"> 
     <div class="flexchild">{{item.portName}}</div> 
     <div class="flex1child"> 
     <paper-toggle-button toggles checked$="{{item.portStatus}}"></paper-toggle-button> 
     </div> 
     <div class="flex1child"><iron-icon icon="icons:settings"></iron-icon></div> 
     </div> 
    </template> 
</paper-material> 
</template> 

<script> 
Polymer({ 
    is: "port-config", 
    properties: { 

    roomConfig: { 
     type: Object, 
     value: function() { 
     return {}; 
     } 
    } 
    } 
}); 

</script> 

コードの呼び出し

<paper-tabs scrollable selected={{selected}}> 
    <template is="dom-repeat" items="{{rooms}}"> 
     <paper-tab>{{item.name}}</paper-tab> 
    </template> 
    </paper-tabs> 

    <iron-pages selected="{{selected}}"> 
    <template is="dom-repeat" items="{{rooms}}"> 
     <div> <port-config room-config="{{item}}"></port-config> </div> 
    </template> 
    </iron-pages> 

</template> 

<script> 
Polymer({ 
    is: "rooms-config", 

    properties: { 

    selected: { 
     type:Number, 
     value: 0, 
     }, 

    rooms: { 
     type: Array, 
     value: function() { 
      var testData = [ 
      { 
       name: "Room1", 
       maxPorts: 16, 
       ports:{ 
       type: Array, 
       value: function() { 
        var testData = [ 
        {portName: "Port 1",portStatus: "true"}, 
        {portName: "Port 2",portStatus: "true"}, 
        {portName: "Port 3",portStatus: "true"}, 
        {portName: "Port 4",portStatus: "true"}, 
        ]; 
        return testData; 
       } 
       } 
      } 
     } 
    } 
}); 

続きです [dom-repeat :: dom-repeat]：itemsの予想される配列、見つかったオブジェクト{}

Answer 1

問題は、属性の値に値の代わりに関数を渡していることです。この部屋の属性は次のようにwritedする必要があります

rooms: { 
     type: Array, 
     value: function() { 
      var testData = [ 
      { 
       name: "Room1", 
       maxPorts: 16, 
       ports:{ 
       type: Array, 
       value: function() { 
        var testData = [ 
        {portName: "Port 1",portStatus: "true"}, 
        {portName: "Port 2",portStatus: "true"}, 
        {portName: "Port 3",portStatus: "true"}, 
        {portName: "Port 4",portStatus: "true"}, 
        ]; 
        return testData; 
       } 
       } 
      } 
      ] // Also you've missed this close bracket. 
     } 
    } 

：たとえば

あなたが必要となりますので、

rooms: { 
    type: Array, 
    value: [ 
    { 
     name: "Room1", 
     maxPorts: 16, 
     ports: [ 
     {portName: "Port 1",portStatus: "true"}, 
     {portName: "Port 2",portStatus: "true"}, 
     {portName: "Port 3",portStatus: "true"}, 
     {portName: "Port 4",portStatus: "true"}, 
     ] 
    } 
    ] 
} 

、あなたがこれをやっているあなたのコード上の他の場所がありませそれらも修正する。