Dynamically set a CSS property based on a template value - css

Question

Is it possible to dynamically set the text color of a input field based on a handlebars.js template value?
I am initially creating my html using this template:
<div class="board">
<div class="header">
<span class="name">Project</span>
<span class="status">Status</span>
</div>
{{#each projects}}
{{> project}}
{{/each}}
</div>
Where projects is an object read from a db. The resulting html (what gets rendered on the page not what is in my html) for each project looks something like this:
<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>
I would like to render this html with the colour of the OK & NOTOK text set dynamically.
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:
{{getStatusColor currentStatus}}
What I would like to do is put this function call directly into the css itself, a bit like:
font-color: {{getStatusColor currentStatus}}
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?

Answer 1

Answering my own question: The template needed to be expanded (from {{> projects}}) to allow for conditional rendering.
<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>
For completeness, the helper function getStatusColor looks like this:
Handlebars.registerHelper('getStatusColor', function(status) {
switch (status) {
case "GOOD" : {
return 'green';
}
break;
case "BAD" : {
return 'red';
}
break;
default : {
...etc.;
}
});
UPDATE:
In the interests of honesty, I should confess I totally missed that I already had this expanded template in my code and that {{> projects}} was pointing to this. I should have just added the style="color:{{getStatusColor status}}" attribute directly into the referenced project template. So, as much for my benefit as others, the final, working, 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>