Polymer 1.0 - Ràng buộc CSS Lớp với thuộc tính

Question

Tôi cố gắng liên kết một Lớp CSS với một giá trị của thuộc tính của tôi để thay đổi màu của mặt hàng đó thành paper-progress. Tôi căn cứ mã của mình trên ví dụ của Polymer trên GitHub và tài liệu về Ràng buộc dữ liệu.

Ở đây mã của tôi: http://jsbin.com/bidebe/10/edit?html,output

Lớp của paper-progress thay đổi một cách chính xác, nhưng màu sắc thì không. Nếu tôi đặt màu lớp trực tiếp, màu sắc chính xác.

Vì vậy, tôi không hiểu tại sao paper-progress của tôi có lớp học tốt nhưng không áp dụng. Nếu ai đó có thể giúp tôi hiểu điều đó, cảm ơn.

Answer 1

Điều này có thể sẽ giúp bạn.

 attached: function() { 
      this.async(function() { 
       var paperProgressArray = this.querySelectorAll('paper-progress');//get all paper-progress 
       var i = 0; 
       var j = paperProgressArray.length; 

       var color; 
       var secundary; 
       var paperProgress; 
       var dificulty; 
       while (i < j) { 
        paperProgress = paperProgressArray[i]; 
        dificulty = paperProgress.value; 
        if (0 <= dificulty && dificulty <= 4) { 
         color = 'red'; 
         secundary = "green"; 
        } else if (4 < dificulty && dificulty <= 7) { 
         color = 'green'; 
         secundary = "red"; 
        } else if (7 < dificulty && dificulty <= 10) { 
         color = 'yellow'; 
         secundary = "green"; 
        } 
         //set and update colors 
        paperProgress.customStyle['--paper-progress-active-color'] = color; 
        paperProgress.customStyle['--paper-progress-secondary-color'] = secundary; 
        this.updateStyles(); 
        i++; 
        } 
       }); 
      }, 

Answer 2

Tôi nghĩ rằng điều này giải thích hành vi hiện tại và cung cấp cho bạn một số cách khác để đạt được những gì bạn muốn (giải pháp Flavio có lẽ là gần với những gì bạn cần làm) https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-properties-shim---limitations-and-api-details