2016-08-08 27 views
0

尝试为我的小项目摆弄Polymer框架。 聚合物DOM重复错误解析对象解析对象内部数组的聚合物dom-repeat错误

继内部数组是代码调用

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

以下是我的端口配置声明

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

在此设置下,我得到错误 [dom-repeat :: dom-repeat]:预期数组为items,发现对象{}

回答

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

有是你的代码的其他地方,你这样做,所以你需要以解决它们。

+0

谢谢Ton Mario。我跟着[链接](https://www.polymer-project.org/1.0/docs/devguide/properties),它显示如下声明。惊讶。 性能:{ 用户:{ 类型:Array, value:function(){ return []; } } – rcreddy

+0

它现在有效吗?我从来没有注意到聚合物文档中有这样的例子:这种方式使用这些值......有点奇怪。好吧,也许你可以按功能声明价值,但我从来没有看到任何人声明这种方式......如果是这样,一切都可能只是你错过的那一个支架。 – MarioAleo

+0

使用函数的值仅用于“对象”和“数组”。你可以检查这个[链接](http://stackoverflow.com/questions/38811194/why-use-function-wrap-for-polymer-property-value-of-type-object)了解更多详情。 – a1626