Jak mogę dynamicznie ustawić nazwę klasy?

Question

Z mojego ostatniego pytania zrozumiałem, że konkatenacja ciągów nie jest dozwolona z wersją 0.9 i wyższą (obecnie migruję do wersji 1.0).

Muszę raczej zawijać każdą zmienną wewnątrz oddzielnego elementu HTML.

Są jednak momenty, w których muszę dynamicznie przypisać wartość wartościami atrybutu href lub class. Nie mogę sprawić, aby działał bezpośrednio, jak poniżej:

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

od 1.0 nie pozwoli na połączenie ciągów!

Proszę zobaczyć opisy poniżej. Próbuję przekazać wartość atrybutu z mojego index.html, który z kolei powinien zastąpić wartość w atrybucie class wewnątrz mojego elementu niestandardowego. Ale to nie działa i rozumiem dlaczego.

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

Oto urywek w index.html

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

jestem przekazując kod szesnastkowy #ff0000 poprzez atrybut v1bg który mam zamiar faktycznie zastąpić właściwość wewnątrz elementu.

Nie wiem jeszcze, czy jest do tego odpowiednia robota. Może użyłem document.querySelector(), ale jeszcze tego nie próbowałem. Jeśli istnieje bezpośrednie podejście HTML, byłoby wspaniale.

Answer 1

Wypróbuj class$="{{v1bg}}", ponieważ spowoduje to połączenie z atrybutem class, a nie z właściwością class.

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