How can I set class name dynamically?

Question

I have understood from my last question here that string concatenate is not allowed with 0.9 and above (currently I am migrating to version 1.0).

I have to rather wrap every variable inside separate HTML element.

However there are times when I need to use a href or class attribute to be assigned with values dynamically. I cannot make it to work directly like the following:

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

since 1.0 won't allow string concatenation!

Please see the snippets below. I am trying to pass an attribute value from my index.html which in turn should replace the value in class attribute inside my custom element. But it is not working and I understand why.

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

Here is the snippet in index.html

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

I am passing a hex code #ff0000 via v1bg attribute which I intend to actually replace the property inside the element.

I don't know yet if there is a work around to it. Might have used document.querySelector() but didn't try that yet. If there is a direct HTML approach that would be wonderful.

Essentiality

Answer 1

Try class$="{{v1bg}}", as this will bind to the class attribute rather than the class property.

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

Luis

Just noticed href$ does not work like class$. I tried <a href$="example.com{{value}}">...</a> but it is not working. Sorry for back to back questions. A complete newbie to Polymer :) – Essentiality

href$="{{value}}" should work, but as you stated before string concatenation does not work so you wouldn't be able to do href$="http://example.com/{{value}}". You can do something similar, though: polymer-project.org/1.0/docs/devguide/… – Luis

String concatenation does work in Polymer 1.2, you should upgrade. See: blog.polymer-project.org/releases/2015/11/02/release-1.2.0 – Encephalogram