我有一个数组buttonColors,其中包含十六进制格式的颜色集。 现在我想显示一组纸质按钮,每个按钮都带有buttonColors数组中的颜色。如何在聚合物1.0中实现它?
<template is="dom-repeat" items="{{buttonColors}}">
<paper-button style="background-color:{{item}}" >
<b>click me</b>
</paper-button>
</template>
&#13;
以上代码段似乎不起作用。请帮助。
答案 0 :(得分:2)
您需要创建一个函数并按以下方式调用它
<template is="dom-repeat" items="{{buttonColors}}">
<paper-button style="{{computeStyle(item)}}" >
<b>click me</b>
</paper-button>
</template>
<script>
computedStyle:function(cl)
{
var s= "background-color:"+cl;
return s;
}
</script>
答案 1 :(得分:1)
1.0不支持
{{}}
绑定中的表达式。您需要将其设为计算属性:style="{{_computeStyle(item)}}"
... Documentation
下面,我已经写了一些示例代码供您使用。
<dom-module id="x-element">
<template is="dom-repeat" items="{{buttonColors}}">
<paper-button style$="{{_computeStyle}}"> <b>click me</b> </paper-button>
</template> ...
<script>
(function() {
Polymer({
is: "x-element",
properties: {
value: {
type: Number,
notify: true
}
},
_computeStyle: function(item) {
// Compute style here
return "background-color:red";
}
});
})()
</script>
</dom-module>