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
,发现对象{}
谢谢Ton Mario。我跟着[链接](https://www.polymer-project.org/1.0/docs/devguide/properties),它显示如下声明。惊讶。 性能:{ 用户:{ 类型:Array, value:function(){ return []; } } – rcreddy
它现在有效吗?我从来没有注意到聚合物文档中有这样的例子:这种方式使用这些值......有点奇怪。好吧,也许你可以按功能声明价值,但我从来没有看到任何人声明这种方式......如果是这样,一切都可能只是你错过的那一个支架。 – MarioAleo
使用函数的值仅用于“对象”和“数组”。你可以检查这个[链接](http://stackoverflow.com/questions/38811194/why-use-function-wrap-for-polymer-property-value-of-type-object)了解更多详情。 – a1626