具有属性双向绑定的聚合物自定义元素

Question

我有一个 Polymer 元素来显示和设置评级（1-5 星），但我无法让它在显示给定评级值并传播回该值的意义上发挥作用，也就是说，在单击其中一颗星的情况下更改 {{item.rating}}。可能是什么问题？

我是这样用的元素，不会变item.rating:

<yp-rating rating="{{item.rating}}"></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>

Answer 1

您的 rating 属性声明不正确。您已经声明了两个属性：rating 和 notify，但您可能打算在 rating 属性.

上设置 notify: true

改变这个：

properties: {
  rating: String,
  notify: true
}

对此：

properties: {
  rating: {
    type: String,
    notify: true
  }
}

见demo

具有属性双向绑定的聚合物自定义元素

Polymer custom element with two-way binding of attribute

javascript

polymer