javascript - Polymer 1.0 - 将 CSS 类与属性绑定(bind)

Question

我尝试将一个 CSS 类绑定(bind)到一个 paper-progress 并使用我的属性值来更改元素的颜色。我的代码基于 GitHub 上的 Polymer 示例以及数据绑定(bind)的文档。

这是我的代码: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++;
                    }
                });
            },