聚合物1.0元素上的動態類

Question

我創建了這個組件來演示我的問題。正如預期的那樣，該組件在Chrome和Firefox中運行。但如果我寫this.$.wrapper.setAttribute('class','blue');而不是this.$.wrapper.setAttribute('class','blue style-scope poly-test');它停止在Firefox中工作。

這是在事件處理程序中更改影子DOM元素上類的首選方法，還是我正在做一件意外的事情，可能 在未來版本中崩潰？

另外，爲什麼我必須指定style-scope和我的元素名稱作爲類手動爲Firefox？

<link rel="import" href="../js/bower_components/polymer/polymer.html"> 
<dom-module id="poly-test"> 
    <style> 
    .blue { border: 10px solid blue; } 
    .red { border: 10px solid red; } 
    #wrapper { font-weight: bold; font-size: 42px; } 
    </style> 
    <template> 
    <div id="wrapper" class="red"><content></content></div> 
    </template> 
</dom-module> 
<script> 
    Polymer({ 
    is: 'poly-test', 
    properties: {'blue': { type: 'Boolean', value: false }}, 
    listeners: { 'click': 'clickHandler' }, 
    clickHandler: function() { 
     this.blue = !this.blue; 
     if (this.blue) { 
     this.$.wrapper.setAttribute('class','blue style-scope poly-test'); 
     } else { 
     this.$.wrapper.setAttribute('class','red style-scope poly-test'); 
     } 
     this.updateStyles(); 
    } 
    }); 
</script> 

Answer 1

Web組件的想法是讓網絡作爲聲明越好。在這精神，實施動態類的聚合物的方法應該是

聲明性方法：（https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#native-binding）

... 
<dom-module id="poly-test"> 
    ... 
    <template> 
    <!-- handle dynamic classes declaratively --> 
    <div class$="{{computeClass(isBlue)}}"> 
     <content></content> 
    </div> 
    </template> 
</dom-module> 
<script> 
    Polymer({ 
    is: 'poly-test', 
    properties: { 
     'isBlue': { type: Boolean, value: false } 
    }, 
    listeners: { 'click': 'clickHandler' }, 
    clickHandler: function() { 
     this.isBlue = !this.isBlue; 
    }, 
    computeClass: function (f) { 
     return f ? "blue" : "red"; 
    } 
    }); 
</script> 

style-scope升級元件和衝壓節點分成DOM當使用由所述框架（下黑幕我相信的行爲），我不認爲我們是想要觸及它。

如果您真的想要處理勢在必行，我會推薦使用Polymer API的toggleClass()方法。

勢在必行方法：（http://polymer.github.io/polymer/）

... 
<dom-module id="poly-test"> 
    ... 
    <template> 
    <div id="wrapper" class="red"><content></content></div> 
    </template> 
</dom-module> 
<script> 
    Polymer({ 
    is: 'poly-test', 
    properties: { 
     'isBlue': { type: Boolean, value: false } 
    }, 
    listeners: { 'click': 'clickHandler' }, 
    clickHandler: function() { 
     this.isBlue = !this.isBlue; 
     this.toggleClass("blue", this.isBlue, this.$.wrapper); 
     this.toggleClass("red", !this.isBlue, this.$.wrapper); 
    } 
    }); 
</script> 

Answer 2

使用classList物業管理類：

<link rel="import" href="../js/bower_components/polymer/polymer.html"> 
<dom-module id="poly-test"> 
    <style> 
    .blue { border: 10px solid blue; } 
    .red { border: 10px solid red; } 
    #wrapper { font-weight: bold; font-size: 42px; } 
    </style> 
    <template> 
    <div id="wrapper" class="red"><content></content></div> 
    </template> 
</dom-module> 
<script> 
    Polymer({ 
    is: 'poly-test', 
    properties: {'blue': { type: 'Boolean', value: false }}, 
    listeners: { 'click': 'clickHandler' }, 
    clickHandler: function() { 
     this.blue = !this.blue; 
     this.$.wrapper.classList.toggle('blue', this.blue); 
     this.$.wrapper.classList.toggle('red', !this.blue) 
    } 
    }); 
</script> 

更多信息classList：https://developer.mozilla.org/en-US/docs/Web/API/Element/classList