Wie kann ich den Klassennamen dynamisch setzen?

Question

Ich habe aus meiner letzten Frage here verstanden, dass Zeichenfolge verketten nicht mit 0.9 und höher erlaubt ist (derzeit bin ich auf Version 1.0 migrieren).

Ich muss lieber jede Variable in separaten HTML-Element umschließen.

Allerdings gibt es Zeiten, wenn ich ein href oder class Attribut verwenden muss, um dynamisch mit Werten zugewiesen werden. Ich kann es nicht machen direkt wie folgt zu arbeiten:

<a href="http://example.com/user/{{userid}}">Link text</a> 

seit 1.0 nicht String-Verkettung lassen!

Bitte beachten Sie die Schnipsel unten. Ich versuche, einen Attributwert von meinem index.html zu übergeben, der wiederum den Wert in class Attribut in meinem benutzerdefinierten Element ersetzen sollte. Aber es funktioniert nicht und ich verstehe warum.

<dom-module id="multi-color-bar-chart"> 
 
    <template> 
 
    <div id="chart"> 
 
      <p>{{title}}</p> 
 
      <div class="{{v1bg}}"> 
 
       <!-- I want {{v1bg}} to be replaced by value sent from index.html --> 
 
       <span>{{value1}}</span>% 
 
      </div> 
 
      <div class="v2" style="background:#ffcc00;"> 
 
       <span>{{value2}}</span>% 
 
      </div> 
 
      <div class="v3" style="background:#369925;"> 
 
       <span>{{value3}}</span>% 
 
      </div> 
 
      <div class="clear"></div> 
 
     </div> 
 
     <div class="clear"></div> 
 
    </template> 
 
    <script> 
 
     (function() { 
 
      Polymer({ 
 
       is: 'multi-color-bar-chart', //registration of element 
 
       properties: { 
 
        title: { type: String }, 
 
        value1: { type: String }, 
 
        value2: { type: String }, 
 
        value3: { type: String }, 
 
        v1bg: { type: String } 
 
       } 
 
      }); 
 
     })(); 
 
    </script> 
 
</dom-module>

Hier ist die Schnipsel in index.html

<multi-color-bar-chart 
 
    title="Annual" 
 
    value1="45.5" 
 
    value2="22.3" 
 
    value3="32.2" 
 
    v1bg="#ff0000"> 
 
    ... 
 
    ... 
 
</multi-color-bar-chart>

Ich bin ein Hex-Code #ff0000 über v1bg Attribut vorbei, die ich beabsichtige tatsächlich zu ersetzen die Eigenschaft innerhalb des Elements.

Ich weiß noch nicht, ob es eine Arbeit gibt. Vielleicht habe ich document.querySelector() verwendet, aber noch nicht versucht. Wenn es einen direkten HTML-Ansatz gibt, wäre das wunderbar.

Answer 1

Versuchen Sie class$="{{v1bg}}", da dies an das Attribut class statt an die class Eigenschaft gebunden wird.

https://www.polymer-project.org/1.0/docs/devguide/data-binding.html#attribute-binding