我试图输出数据从一个自定义的聚合物组分<data-component>中的<iron-list>，但是当我打开网页没有显示。当我将一系列对象直接传递给铁清单时，它会起作用<iron-list items='[{"name": "test1"}, {"name":"test2"}]' >
我在这里做错了什么，是<template is="dom-bind" id="t">强制性的吗？
<html>
<head>
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../data-component.html">
<link rel="import" href="../../iron-list/iron-list.html">
</head>
<body unresolved>
<template is="dom-bind" id="t">
<data-component>
<!--<iron-list items='[{"name": "test1"}, {"name":"test2"}]' > WORKS -->
<iron-list items="{{data}}" >
<template>
<div>
Name: <span>{{item.name}}</span>
</div>
</template>
</iron-list>
</data-component>
</template>
</body>
</html>
<link rel="import" href="../polymer/polymer.html">
<dom-module id="data-component">
<template>
<content></content>
</template>
</dom-module>
<script>
window.coolData = [
{"name": "Bob"},
{"name": "Tim"},
{"name": "Mike"}
];
Polymer({
is: 'data-component',
properties: {
data: {
value: window.coolData
}
}
});
</script>
我将为我已经发布的内容提出一个替代答案。如果您希望data-component始终包含，iron-list则可以在此处使用此版本。但是，如果该内容data-component应更灵活，请使用我的其他答案。
如果您iron-list向内移动，则data-component可以dom-bind在index.html中删除。
data-component.html
<link rel="import" href="../polymer/polymer.html">
<dom-module id="data-component">
<template>
<iron-list items="{{data}}" >
<template>
<div>
Name: <span>{{item.name}}</span>
</div>
</template>
</iron-list>
</template>
</dom-module>
<script>
window.coolData = [
{"name": "Bob"},
{"name": "Tim"},
{"name": "Mike"}
];
Polymer({
is: 'data-component',
properties: {
data: {
type: Array,
value: window.coolData
}
}
});
</script>
index.html
<body unresolved>
<data-component></data-component>
</body>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句