dom-repeat 模板无法渲染数组，并出现错误“预期的项目数组”

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

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

该数组按以下格式传递到自定义元素的属性中：

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

我已阅读关于模板中继器的文档 https://www.polymer-project.org/1.0/docs/devguide/templates.html#dom-repeat好几次了，还是找不到我做错了什么。

任何帮助将非常感激！

这是我的自定义元素：

<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对象（参见聚合物特性文档 https://www.polymer-project.org/1.0/docs/devguide/properties.html):

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

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