javascript - 传递到 polymer 元件的数据不完整

Question

请原谅菜鸟问题，我已被添加到使用 polymer 的项目中，但我无法弄清楚我做错了什么。

我有以下组件:

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

当我将此元素加载到 html 模板中时，呈现的最终产品中出现的唯一值是标题。

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

为什么其他值在渲染时不显示？

Answer 1

Here您可以找到有关它的文档。

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.

所以，这应该有效:

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