根据模板值动态设置CSS属性 [英] Dynamically set a CSS property based on a template value

问题描述

是否可以根据handlebars.js模板值动态设置输入字段的文本颜色？

Is it possible to dynamically set the text color of a input field based on a handlebars.js template value?

我最初使用此模板创建我的html：

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>

其中 projects db。对于每个项目的结果html（什么在页面上呈现而不是在我的html中的）看起来像这样：

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>

我想用OK& NOTOK文本动态设置。

I would like to render this html with the colour of the OK & NOTOK text set dynamically.

我已经有一个handlebars帮助函数，将成功返回基于每个选项的正确的颜色代码，我可以调用这个：

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

我想做的是将此函数直接调用到css本身，有点像：

What I would like to do is put this function call directly into the css itself, a bit like:

font-color: {{getStatusColor currentStatus}}

但是显然这不行。

推荐答案

回答问题，但是我可以在哪里使用它来正确格式化页面上的文本？我自己的问题：模板需要扩展（从 {{> projects}} ），以允许条件渲染。

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>

为了完整性，辅助函数getStatusColor如下所示：

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.;
    }
});

更新：
为了诚实的利益，我必须承认我完全错过了我已经在我的代码中有这个扩展的模板， {{> projects}} 指向这个。我应该直接将 style =color：{{getStatusColor status}}属性添加到引用的项目模板。所以，为了我的好处，作为其他人，最终的，工作的HTML：

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>

这篇关于根据模板值动态设置CSS属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！