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>
推荐答案
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屋!