dom-repeat模板无法呈现错误为“项目预期数组"的数组 [英] dom-repeat template fails to render array with error 'expected array for items'

问题描述

我有一个简单的模板，用于呈现数组对象.但是，它失败并显示以下消息:

I have a simple template that renders an array object. However, it fails with the following message:

[dom-repeat::dom-repeat]: expected array for `items`, found [{"code":1,"name":"Item #1"},{"code":2,"name":"Item #2"},{"code":3,"name":"Item #3"}]

以以下格式在自定义元素的属性中传递数组:

The array is passed in the attribute of the custom element in the following format:

[{"code":1,"name":"Item #1"},{"code":2,"name":"Item #2"},{"code":3,"name":"Item #3"}]

我已阅读有关模板中继器的文档几次，仍然找不到我在做什么错.

I have read the docs on template repeaters several times and still unable to find what I am doing wrong.

任何帮助将不胜感激！

Any help would be much appreciated!

这是我的自定义元素:

<dom-module id="x-myelement">   
    <template>
        <div>
            <h1>{{title}}</h1>
            <ul>
                <template is="dom-repeat" as="menuitem" items="{{items}}">
                    <li><span>{{menuitem.code}}</span></li>
                </template>
            </ul>           
        </div>
    </template>
    <script>
        (function() {
            Polymer({
              is: 'x-myelement',

              title: String,

              items: {
                  type: Array,
                  notify: true,
                  value: function(){ return []; }
              }           
            });
          })();
    </script>
</dom-module>

现在我在这里使用它:

<x-myelement title="Hello Polymer" 
             items='[{"code":1,"name":"Item #1"},{"code":2,"name":"Item #2"},{"code":3,"name":"Item #3"}]'>
</x-myelement>

推荐答案

您需要将元素属性放入properties对象(请参见

You need to put your element properties into the properties object (see the Polymer documentation on properties):

Polymer({
  is: 'x-myelement',
  properties: {
    title: String,
    items: {
      type: Array,
      notify: true,
      value: function() {return [];}
    }
  }
});

否则，Polymer没有有关您的属性的信息.它将项目视为字符串，并且未将属性值解析为JSON数组.最终，dom-repeat也为其items属性传递了一个字符串，从而导致您看到错误.

Otherwise Polymer has no information about your properties. It treated items as a string and didn't parse the attribute value as a JSON array. Eventually dom-repeat was passed a string for its items property as well, resulting in the error that you saw.

这篇关于dom-repeat模板无法呈现错误为“项目预期数组"的数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！