객체 내부의 배열을 구문 분석하는 중 DOM 반복 오류가 발생했습니다.

Question

작은 프로젝트의 Polymer 프레임 워크를 사용하려고 시도합니다. 다음은 객체

내부의 배열을 분석 폴리머 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의 예상 배열 Object {}

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

, 당신이하고있는 코드에 다른 장소가있어 그들을 고칠 수도 있습니다.