Question

对不起，如果这是一个菜鸟Q.我是html / js / css的初学者。

我正在尝试创建一个众筹温度计的HandleBars模板。我的问题是我需要动态值来确定Handlebars模板中进度条的宽度，这需要CSS。我对动态CSS的概念感到困惑，或者是否可能。

实际上，温度计的进度是基于Google表格中名为{{cells.percComplete}}的汇总值，该汇总值插入到HandleBars中。

我需要模板'progress'div的宽度等于percComplete。

的Javascript

var RBITemplate = Handlebars.compile($('#team-rbi-template').html());

 $('#total').sheetrock({
   url: mySpreadsheet,
   query: "select sum(B)/100 where (A = 'Donate $2 to Test Campaign')",
   labels: ['percComplete'],
  rowTemplate: RBITemplate
});

Handlebars HTML模板 - 这就是我被困的地方

<ol id="total">
<script id="team-rbi-template" type="text/x-handlebars-template">
  <div id="glass">
    <div id="progress" style="width: {{cells.percComplete }}"> (???)
    </div>
  </div>
....

但这不可能是正确的。

实现我想做的事情是否可行？

Answer 1

您可以在模板渲染后通过javascript设置div的样式

Handlebars模板中的动态CSS？

1 个答案: