title: Dynamically set a CSS property based on a template value
body: <p>Is it possible to  dynamically set the text color of a input field based on a handlebars.js template value?</p>
  
  <p>I am initially creating my html using this template:</p>
  
  <pre><code>&lt;div class="board"&gt;
      &lt;div class="header"&gt;
          &lt;span class="name"&gt;Project&lt;/span&gt;
          &lt;span class="status"&gt;Status&lt;/span&gt;
      &lt;/div&gt;
      {{#each projects}}
      {{&gt; project}}
      {{/each}}
  &lt;/div&gt;
  </code></pre>
  
  <p>Where <code>projects</code> is an object read from a db. The resulting html (what gets rendered on the page not what is in my html) for each <code>project</code> looks something like this:</p>
  
  <pre><code>&lt;div class="project"&gt;
      &lt;span class="name"&gt;FOO&lt;/span&gt;
      &lt;span class="status"&gt;OK&lt;/span&gt;
  &lt;/div&gt;
  &lt;div class="project"&gt;
      &lt;span class="name"&gt;BAR&lt;/span&gt;
      &lt;span class="status"&gt;NOTOK&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I would like to render this html with the colour of the OK &amp; NOTOK text set dynamically.</p>
  
  <p>I already have a handlebars helper function that will successfully return the correct colour code based on each option and I can call this using:</p>
  
  <pre><code>{{getStatusColor currentStatus}}
  </code></pre>
  
  <p>What I would like to do is put this function call directly into the css itself, a bit like:</p>
  
  <pre><code>font-color: {{getStatusColor currentStatus}}
  </code></pre>
  
  <p>But obviously this doesn't work. This function does feel like the right approach though but where can I use it to format the text correctly on the page?</p>