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

Posted 2023-03-08

【中文标题】根据模板值动态设置 CSS 属性

【英文标题】：Dynamically set a CSS property based on a template value

【发布时间】：2012-08-21 01:28:15

【问题描述】：

是否可以根据 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 是从数据库读取的对象。每个 project 生成的 html（页面上呈现的内容而不是我的 html 中的内容）看起来像这样：

<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

但这显然行不通。这个函数确实感觉是正确的方法，但是我可以在哪里使用它来正确格式化页面上的文本？

【参考方案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>