テンプレート値に基づいてCSSプロパティを動的に設定する

Question

handlebars.jsテンプレート値に基づいて入力フィールドのテキストの色を動的に設定できますか？

私は当初、このテンプレートを使用して、私のHTMLを作成しています：

projectsは、DBから読み込まれたオブジェクトである

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

。

<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テキストの色を持つこのHTMLをレンダリングしたいと思います。各projectのために（私のhtmlであるない何ページにレンダリングされるどのような）結果のHTMLは次のようになります。

私はすでに成功し、各オプションに基づいて正しい色コードを返しますハンドルヘルパー関数を持っていると私が使用してこれを呼び出すことができます。

{{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}}はこれを指していた。私はちょうど参照されたprojectテンプレートにstyle="color:{{getStatusColor status}}"属性を直接追加しておくべきです。したがって、他の人と同じように、最終的な、働く、最終的な、私の利益のために：

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