數據傳遞到聚合物元素不完整

Question

請原諒noob問題，我已被添加到使用聚合物的項目，我無法弄清楚我做了什麼錯誤。

我有以下組成部分：

<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你可以找到關於它的文檔。

帶破折號的屬性名稱會通過大寫字母在每個破折號後面的字符轉換爲camelCase屬性名稱，然後刪除破折號。例如，屬性first-name映射到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>