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>