Javascript 具有属性双向绑定的聚合自定义元素
我有一个聚合物元素来显示和设置评级1-5颗星,我无法使它工作,因为它显示给定的评级值,并传播回该值,即,在单击其中一颗星时更改{item.rating}。有什么问题吗 我使用这样的元素,它不会更改item.rating: 使用纸张输入,它可以工作:Javascript 具有属性双向绑定的聚合自定义元素,javascript,polymer,Javascript,Polymer,我有一个聚合物元素来显示和设置评级1-5颗星,我无法使它工作,因为它显示给定的评级值,并传播回该值,即,在单击其中一颗星时更改{item.rating}。有什么问题吗 我使用这样的元素,它不会更改item.rating: 使用纸张输入,它可以工作: <paper-input value="{{item.rating}}" label="Rating"></paper-input> 元素本身在这里: <dom-module id="yp-rating">
<paper-input value="{{item.rating}}" label="Rating"></paper-input>
元素本身在这里:
<dom-module id="yp-rating">
<template>
<style is="custom-style">
iron-icon {
--iron-icon-fill-color: lightgray;
}
</style>
<iron-icon th:title="#{rating1}" icon="{{star(rating, 1)}}" on-tap="setStar" data-s="1"></iron-icon>
<iron-icon th:title="#{rating2}" icon="{{star(rating, 2)}}" on-tap="setStar" data-s="2"></iron-icon>
<iron-icon th:title="#{rating3}" icon="{{star(rating, 3)}}" on-tap="setStar" data-s="3"></iron-icon>
<iron-icon th:title="#{rating4}" icon="{{star(rating, 4)}}" on-tap="setStar" data-s="4"></iron-icon>
<iron-icon th:title="#{rating5}" icon="{{star(rating, 5)}}" on-tap="setStar" data-s="5"></iron-icon>
</template>
<script type="text/javascript">
Polymer({
is : "yp-rating",
properties: {
rating: String,
notify: true
//readOnly: false,
//reflectToAttribute: true
},
star: function(r, l) {
return (this.rating && this.rating >= l) ? "star" : "star-border";
},
setStar: function(e) {
this.rating = e.target.getAttribute("data-s");
console.log("Rating set to " + this.rating);
e.stopPropagation();
}
});
</script>
</dom-module>
您的分级属性声明不正确。您已经声明了两个属性:rating和notify,但您可能想在rating属性上设置notify:true
更改此项:
properties: {
rating: String,
notify: true
}
为此:
properties: {
rating: {
type: String,
notify: true
}
}
请参见@yglott没问题:
properties: {
rating: {
type: String,
notify: true
}
}