根据模板值动态设置CSS属性

Question

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

我最初使用这个模板创建我的html:

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

哪里projects是从数据库读取的对象.生成的html(在页面上呈现的内容,而不是我的html中的内容)project看起来像这样:

<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文本颜色渲染这个html.

我已经有一个把手辅助函数,可以根据每个选项成功返回正确的颜色代码,我可以使用以下方法调用它:

{{getStatusColor currentStatus}}

我想做的是将这个函数调用直接放入css本身,有点像:

font-color: {{getStatusColor currentStatus}}

但显然这不起作用.这个功能确实感觉像是正确的方法,但我在哪里可以使用它在页面上正确格式化文本？

Answer 1

回答我自己的问题:模板需要扩展(从{{> projects}})以允许条件渲染.

<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如下所示:

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

更新:为了诚实,我应该承认我完全错过了我已经在我的代码中使用了这个扩展模板,{{> projects}}并指出了这一点.我应该style="color:{{getStatusColor status}}"直接将属性添加到引用的project模板中.因此,尽管我和其他人一样受益,最终的,有效的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>