dynamiczne klasy polimerów 1.0 elementów

Question

Stworzyłem ten komponent, aby zademonstrować moje pytanie. Ten komponent działa zgodnie z oczekiwaniami w wersjach chrome i firefox. Ale jeśli napiszę this.$.wrapper.setAttribute('class','blue'); zamiast this.$.wrapper.setAttribute('class','blue style-scope poly-test'); przestanie działać w firefox.

Czy jest to preferowany sposób zmiany klas elementów shadow house wewnątrz procedury obsługi zdarzeń, czy też robię coś przypadkowo dobrze, co może spowodować przerwę w przyszłej wersji na ?

Ponadto, dlaczego muszę określić ręcznie style-scope i nazwę mojego elementu jako klasę dla 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

Pomysł komponentów internetowych jest, aby w internecie jako deklaratywnej, jak to możliwe. W tym duchu polimerowy sposobem realizacji klas dynamicznych należy

deklaratywne podejście: (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 jest wykorzystywana przez strukturę podczas aktualizacji elementów i wytłaczania węzłów w DOM (w zacienionych zachowanie uważam) i nie sądzę, że mamy go dotknąć.

Jeśli naprawdę chcesz obsługiwać bezwzględnie, zalecam użycie metody Polymer API: toggleClass().

Imperatyw podejście: (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

Użyj właściwości classList zarządzanie klasy:

<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> 

Więcej informacji na classList: https://developer.mozilla.org/en-US/docs/Web/API/Element/classList