[英]Polymer custom element with two-way binding of attribute
I have a Polymer-element to display and set a rating (1-5 stars), and I do not manage to make it work in the sense that it displays a given rating value, and propagates back the value, that is, changing {{item.rating}}
in case of clicking on one of the stars. 我有一个聚合物元件来显示和设置评级(1-5星),并且在显示给定的评级值并传播回该值(即更改
{{item.rating}}
,如果点击其中一颗星。 What could be the problem ? 可能是什么问题呢 ?
I use the element like this, which does not change item.rating
: 我使用这样的元素,它不会更改
item.rating
:
<yp-rating rating="{{item.rating}}"></yp-rating>
Using a paper-input, it works: 使用纸张输入,它的工作原理是:
<paper-input value="{{item.rating}}" label="Rating"></paper-input>
The element itself is here: 元素本身在这里:
<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>
Your rating
property is not declared correctly. 您的
rating
属性未正确声明。 You've declared two properties: rating
and notify
, but you probably meant to set notify: true
on the rating
property. 您已经声明了两个属性:
rating
和notify
,但是您可能打算在rating
属性上设置notify: true
。
Change this: 更改此:
properties: {
rating: String,
notify: true
}
to this: 对此:
properties: {
rating: {
type: String,
notify: true
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.