我在理解 Polymer 1.0 如何处理声明的属性时遇到问题,特别是那些 type="object" 的属性。为了弄清楚这一点,我正在尝试创建一个简单的元素来选择材料类型并显示有关它的内容。
这是我的元素到目前为止的样子
<dom-module id="mat-panel">
<style>
:host {
background: blue;
}
</style>
<template>
<iron-selector attr-for-selected="name" selected="{{material}}">
<div name="polyester">Polyester</div>
<div name="nylon">Nylon</div>
<div name="polypropylene">Polypropylene</div>
<div name="kevlar">Kevlar</div>
</iron-selector>
<h1>{{material}}</h1>
<ul>
<li>{{material.color}}</li>
<li>{{material.price}}</li>
</ul>
</template>
</dom-module>
<script>
(function() {
Polymer({
is: 'mat-panel',
properties: {
material: {
type: Object,
notify: true;
value:{
kevlar: {
color: 'red'
price: 1.25
},
nylon: {
color: 'black'
price: 2.50
},
polypropylene: {
color: 'green'
price: 3.15
},
polyester: {
color: 'purple'
price: 4.25
}
}
}
}
});
})();
</script>
Iron-selector 应该允许用户选择一种材料,然后在 h1 中显示材料名称,在 li 中显示颜色和价格。
所以我需要知道的两件事是:
- 我的材质对象的格式是否正确?如果不是,它应该怎么看?(我知道这不是因为在“value:”之后为“{”引发了控制台错误)
- 我的绑定设置正确吗?如果不是应该如何设置?