Question

我尝试使用my属性的值将CSS类绑定到paper-progress以更改项目的颜色。我的代码基于Polymer 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#custom-properties-shim---limitations-and-api-details

Polymer 1.0 - 使用属性绑定CSS类

2 个答案: