Polymer 1.0 - 使用屬性綁定CSS類

Question

我嘗試將CS​​S類綁定到帶有my屬性值的paper-progress ，以更改項目的顏色。 我將我的代碼基於GitHub上的Polymer示例和數據綁定文檔。

這是我的代碼： http ： //jsbin.com/bidebe/10/edit？html，output

paper-progress的類正確地改變，但顏色沒有。 如果我直接輸入類顏色，顏色是正確的。

所以我不明白為什么我的paper-progress有良好的課程但不適用。 如果有人能幫我理解，謝謝。

Answer 1

這可能會對你有所幫助。

     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

我認為這解釋了當前的行為，並為您提供了一些其他方法來實現您的目標（Flavio的解決方案可能接近您需要做的事情） https://www.polymer-project.org/1.0/docs/devguide/styling的.html＃自定義屬性-墊片---局限性和-API的細節