Polymer 1.0 - Binding CSS-Klasse mit Eigenschaft

Question

Ich versuche, eine CSS-Klasse an eine paper-progress mit dem Wert meiner Eigenschaft zu binden, um die Farbe des Elements zu ändern. Ich stütze meinen Code auf das Beispiel des Polymers auf GitHub und die Dokumentation der Datenbindung.

Hier mein Code: http://jsbin.com/bidebe/10/edit?html,output

Die Klasse der paper-progress Änderungen korrekt, aber die Farbe nicht. Wenn ich die Klassenfarbe direkt anlege, ist die Farbe korrekt.

Also ich verstehe nicht, warum meine paper-progress die gute Klasse hat, aber es nicht anwendet. Wenn mir jemand helfen kann, das zu verstehen, danke.

Answer 1

Das wird dir vielleicht helfen.

 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

Ich denke, das das aktuelle Verhalten erklärt und gibt Ihnen einige andere Möglichkeiten, zu erreichen, was Sie wollen (Flavio Lösung ist wahrscheinlich in der Nähe zu dem, was Sie tun müssen) https://www.polymer-project.org/1.0/docs/devguide/styling.html#custom-properties-shim---limitations-and-api-details