聚合物dom-repeat错误解析对象内部的数组 [英] Polymer dom-repeat error parsing the array inside the object

问题描述

尝试为我的小项目弄弄Polymer框架. 聚合物dom-repeat错误分析了对象内部的数组

Trying to fiddle with Polymer framework for my small project. Polymer dom-repeat error parsing the array inside the object

以下是代码调用

Following is the code invocation

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

以下是我的port-config声明

Following is my port-config declaration

<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的期望数组，找到对象{}

With this setup I am getting error [dom-repeat::dom-repeat]: expected array for items, found Object {}

推荐答案

问题应该在于，在属性值上您正在传递函数而不是值.

The problem should be that on the attribute's value you're passing functions instead of values.

例如:

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

这个房间属性应该这样写:

This room attribute should be writed like this:

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

您正在执行的代码中还有其他地方，因此您也需要对其进行修复.

There're other places on your code that you're doing this, so you'll need to fix them too.

这篇关于聚合物dom-repeat错误解析对象内部的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！