CODEWITHSUNDEEP
javascriptpolymer
thatgibbyguy
thatgibbyguy

Reputation: 4113

Data passing to a polymer element incomplete

Please excuse the noob question, I've been added to a project using polymer and I can't figure out what I've done incorrectly.

I've got the following component:

  <template>
    <div class="hb-graph">
      <h3 class="hb-graph__headline">[[headline]]</h3>
      <div class="hb-graph__container">
        <div class="hb-graph__graph"
             style="width:[[barWidth]]%">
        </div>
        <div class="hb-graph__rates">
          <span class="hb-graph__bar-value">
            [[barValue]]
          </span>
          <span class="hb-graph__bar-value-rate">
            [[barValueRate]]
          </span>
        </div>
        <span class="hb-graph__beginning-range hb-graph__range">
          0
        </span>
        <span class="hb-graph__final-range hb-graph__range">
          [[maxValue]]
        </span>
      </div>
    </div>
  </template>

  <script>
    Polymer({
      is: "horizontal-bar-graph",
      properties: {
        headline: String,
        maxValue: String,
        barValue: String,
        barValueRate: String,
        barWidth: Number
      }
    });
  </script>

When I load this element into an html template, the only value that appears in the rendered final product is the headline. 

<horizontal-bar-graph headline="Total Current Flow"
                      maxValue="4000"
                      barValue="3,300"
                      barValueRate="m3/h"
                      barWidth=82.5>
</horizontal-bar-graph>

Why wouldn't the other values display at render?

Upvotes: 0

Views: 33

Answers (1)

Flavio Ochoa
Flavio Ochoa

Reputation: 961

Here you can find the documentation that talks about it.

Attribute names with dashes are converted to camelCase property names by capitalizing the character following each dash, then removing the dashes. For example, the attribute first-name maps to firstName.

So, this should work:

<horizontal-bar-graph headline="Total Current Flow"
                  max-value="4000"
                  bar-value="3,300"
                  bar-value-rate="m3/h"
                  bar-width=82.5>
</horizontal-bar-graph>

Upvotes: 2

Related Questions