2015-10-02 1 views
5

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.Polymer 1.0 - Binding CSS-Klasse mit Eigenschaft

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.

Antwort

2

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++; 
        } 
       }); 
      }, 
+0

Eigentlich ist es die Arbeit erledigt (in ein anderer Weg). XD –

+0

Danke, in der Tat macht es den Job :) –