2017-07-14 157 views
0

我有一個聚合物元素來顯示和設置評分(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> 

回答

1

您的rating屬性沒有正確聲明。您已聲明兩個屬性:ratingnotify,但您可能打算在rating屬性上設置notify: true

更改此:

properties: { 
    rating: String, 
    notify: true 
} 

這樣:

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

demo

+0

謝謝。我現在覺得很蠢:) – yglodt

+0

@yglodt沒問題:) – tony19

相關問題