Définir dynamiquement une propriété CSS basé sur un modèle de valeur

Est-il possible de définir dynamiquement la couleur du texte d'un champ de saisie basé sur un handlebars.js valeur de modèle?

Je suis d'abord en créant mon code html à l'aide de ce modèle:

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

Où projects est un objet de lecture à partir d'une base. Le html résultant (ce qui sera affiché sur la page, pas ce qui est dans mon code html) pour chaque project ressemble à quelque chose comme ceci:

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

Je voudrais rendre ce code html grâce à la couleur de l'OK & NOTOK texte de définir dynamiquement.

J'ai déjà un guidon fonction d'aide qui va avec succès le bon code de couleur en fonction de chaque option et je peux appeler cela à l'aide de:

{{getStatusColor currentStatus}}

Ce que je voudrais faire est de mettre cet appel de fonction directement dans le css lui-même, un peu comme:

font-color: {{getStatusColor currentStatus}}

Mais évidemment, cela ne fonctionne pas. Cette fonction n'a l'impression que la bonne approche, mais où puis-je l'utiliser pour formater correctement le texte sur la page?

OriginalL'auteur Oliver Lloyd | 2012-08-26

  1. 15

    Pour répondre à ma propre question: Le modèle a dû être agrandi (de {{> projects}}) pour permettre le rendu conditionnel.

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

    Pour l'exhaustivité, la fonction d'assistance getStatusColor ressemble à ceci:

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

    Mise à JOUR:
    Dans l'intérêt de l'honnêteté, je dois avouer j'ai totalement raté que j'ai déjà eu ce nouveau modèle dans mon code et que {{> projects}} a été pointant vers le présent. J'aurais juste ajouté le style="color:{{getStatusColor status}}" attribut directement dans le référencés project modèle. Donc, comme beaucoup de mes avantages que les autres, au final, de travail, 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>

    OriginalL'auteur Oliver Lloyd