根據模板值動態設置CSS屬性

Question

是否可以基於handlebars.js模板值動態設置輸入字段的文本顏色？

我使用這個模板創建最初我的html：

<div class="board"> 
    <div class="header"> 
     <span class="name">Project</span> 
     <span class="status">Status</span> 
    </div> 
    {{#each projects}} 
    {{> project}} 
    {{/each}} 
</div> 

哪裏projects是從數據庫讀取的對象。生成的HTML每個project（什麼得到的頁面沒有什麼是我的html上渲染）看起來是這樣的：

<div class="project"> 
    <span class="name">FOO</span> 
    <span class="status">OK</span> 
</div> 
<div class="project"> 
    <span class="name">BAR</span> 
    <span class="status">NOTOK</span> 
</div> 

我想使這個網站與OK & NOTOK文字的顏色動態設置。

我已經有一個把手輔助函數將成功返回基於每個選項正確的顏色代碼，我可以通過調用這個：

{{getStatusColor currentStatus}} 

我想要做的是直接把這個函數調用到css本身有點像：

font-color: {{getStatusColor currentStatus}} 

但是顯然這是行不通的。這個函數雖然感覺像是正確的方法，但我可以在哪裏使用它來正確地在頁面上格式化文本？

Answer 1

回答我自己的問題：模板需要擴展（從{{> projects}}）以允許進行條件呈現。

<div class="board"> 
    <div class="header"> 
     <span class="name">Project</span> 
     <span class="status">Status</span> 
    </div> 
    {{#each projects}} 
    <div class="project"> 
     <span class="name">{{name}}</span> 
     <span class="status" style="color:{{getStatusColor status}}">{{status}}</span> 
    </div> 
    {{/each}} 
</div> 

爲了完整起見，輔助函數getStatusColor看起來是這樣的：

Handlebars.registerHelper('getStatusColor', function(status) { 
    switch (status) { 
     case "GOOD" : { 
      return 'green'; 
     } 
     break; 
     case "BAD" : { 
      return 'red'; 
     } 
     break; 
     default : { 
     ...etc.; 
    } 
}); 

UPDATE： 在誠實的利益，我應該承認，我完全錯過了，我已經在我的代碼有這個展開的模板而{{> projects}}正指向這一點。我應該直接將style="color:{{getStatusColor status}}"屬性添加到引用的project模板中。所以，儘可能多的爲我的好處，最後，工作，HTML：

<template name="foo"> 
    <div class="board"> 
    <div class="header"> 
     <span class="name">Project</span> 
     <span class="status">Status</span> 
    </div> 
    {{#each projects}} 
    {{> project}} 
    {{/each}} 
    </div> 
</template> 

<template name="project"> 
    <div class="project {{selected}}"> 
     <span class="name">{{name}}</span> 
     <span class="status"style="color:{{getStatusColor status}}">{{status}}</span> 
    </div> 
</template>