Polymer dom-repeat Fehler beim Analysieren des Arrays innerhalb des Objekts

Question

Versuchen, mit Polymer-Framework für mein kleines Projekt zu geifern. Polymer dom-Wiederholungsfehler des Arrays innerhalb des Objekts Parsen

Im Folgenden finden Sie den Code ein Aufruf

<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; 
       } 
       } 
      } 
     } 
    } 
}); 

Es folgt mein Port-config Erklärung

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

Mit diesem Setup ich Störung erhalte [dom-repeat :: dom-repeat]: erwartetes Array für items, gefunden Objekt {}

Answer 1

Das Problem sollte sein, dass Sie für den Wert des Attributs Funktionen anstelle von Werten übergeben.

Zum Beispiel:

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"}, 
     ] 
    } 
    ] 
} 

Es sind andere Orte auf dem Code, den Sie dies tun, so dass Sie brauchen werden:

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. 
     } 
    } 

Dieses Zimmer Attribut sollte wie folgt writed werden um sie auch zu reparieren.