Handlebars动态样式：基于SQL数据实现条件渲染与CSS类管理
在Web开发中，经常需要根据后端SQL查询返回的数据，动态控制前端页面的样式渲染。Handlebars作为一款轻量级的语义化模板引擎，能够很好地配合模板语法实现条件判断与动态CSS类绑定，减少前端硬编码逻辑，提升代码可维护性。
一、基础场景说明
假设我们从SQL数据库中查询用户列表数据，返回的结构如下：
[
{"id": 1, "name": "张三", "status": 1, "score": 92},
{"id": 2, "name": "李四", "status": 0, "score": 58},
{"id": 3, "name": "王五", "status": 1, "score": 76},
{"id": 4, "name": "赵六", "status": 2, "score": 41}
]其中status字段表示用户状态：0代表未激活，1代表正常，2代表封禁；score为用户积分，需要根据积分范围显示不同的样式等级。我们需要实现两个需求：一是根据status值渲染不同的状态标签样式，二是根据score范围动态绑定积分等级对应的CSS类。
二、Handlebars条件渲染实现状态样式
Handlebars内置了{{#if}}、{{#unless}}等块级助手，以及自定义助手的能力，可以轻松实现条件判断。首先我们定义状态对应的样式映射，然后编写模板。
1. 定义CSS样式
先准备基础的状态样式类：
.status-tag {
display: inline-block;
padding: 4px 12px;
border-radius: 4px;
font-size: 14px;
}
.status-inactive {
background-color: #f0f0f0;
color: #999;
}
.status-normal {
background-color: #e8f5e9;
color: #2e7d32;
}
.status-banned {
background-color: #ffebee;
color: #c62828;
}2. 编写Handlebars模板
我们可以使用内置条件判断，也可以自定义助手实现更灵活的逻辑：
<ul class="user-list">
{{#each users}}
<li class="user-item">
<span class="user-name">{{name}}</span>
<span class="status-tag
{{#if (eq status 0)}}
status-inactive
{{else if (eq status 1)}}
status-normal
{{else if (eq status 2)}}
status-banned
{{/if}}
">
{{#if (eq status 0)}}未激活
{{else if (eq status 1)}}正常
{{else if (eq status 2)}}封禁
{{/if}}
</span>
</li>
{{/each}}
</ul>这里的eq是自定义的比较助手，需要在Handlebars注册时使用，实现方式如下（以Node.js环境为例）：
const Handlebars = require("handlebars");
// 注册eq比较助手
Handlebars.registerHelper("eq", function(a, b) {
return a === b;
});三、基于数值范围动态绑定CSS类
对于积分score的范围判断，我们可以通过自定义助手直接返回对应的CSS类名，减少模板中的逻辑复杂度。
1. 注册积分等级助手
Handlebars.registerHelper("scoreLevel", function(score) {
if (score >= 90) {
return "score-excellent";
} else if (score >= 60) {
return "score-pass";
} else {
return "score-fail";
}
});2. 补充积分对应的CSS样式
.score {
display: inline-block;
margin-left: 16px;
padding: 4px 12px;
border-radius: 4px;
font-size: 14px;
}
.score-excellent {
background-color: #e3f2fd;
color: #1565c0;
}
.score-pass {
background-color: #fff3e0;
color: #ef6c00;
}
.score-fail {
background-color: #fce4ec;
color: #d81b60;
}3. 模板中调用助手绑定类
<ul class="user-list">
{{#each users}}
<li class="user-item">
<span class="user-name">{{name}}</span>
<span class="status-tag
{{#if (eq status 0)}}
status-inactive
{{else if (eq status 1)}}
status-normal
{{else if (eq status 2)}}
status-banned
{{/if}}
">
{{#if (eq status 0)}}未激活
{{else if (eq status 1)}}正常
{{else if (eq status 2)}}封禁
{{/if}}
</span>
<span class="score {{scoreLevel score}}">积分：{{score}}</span>
</li>
{{/each}}
</ul>四、完整渲染流程示例
结合后端SQL查询到数据后的完整渲染逻辑如下（以Express框架为例）：
const express = require("express");
const Handlebars = require("handlebars");
const app = express();
// 模拟SQL查询返回的用户数据
const mockUserData = [
{"id": 1, "name": "张三", "status": 1, "score": 92},
{"id": 2, "name": "李四", "status": 0, "score": 58},
{"id": 3, "name": "王五", "status": 1, "score": 76},
{"id": 4, "name": "赵六", "status": 2, "score": 41}
];
// 注册助手
Handlebars.registerHelper("eq", (a, b) => a === b);
Handlebars.registerHelper("scoreLevel", (score) => {
if (score >= 90) return "score-excellent";
if (score >= 60) return "score-pass";
return "score-fail";
});
// 定义模板字符串
const templateStr = `
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户列表</title>
<style>
.user-list { list-style: none; padding: 0; }
.user-item { padding: 12px; border-bottom: 1px solid #eee; display: flex; align-items: center; }
.user-name { font-size: 16px; width: 100px; }
.status-tag {
display: inline-block;
padding: 4px 12px;
border-radius: 4px;
font-size: 14px;
}
.status-inactive { background-color: #f0f0f0; color: #999; }
.status-normal { background-color: #e8f5e9; color: #2e7d32; }
.status-banned { background-color: #ffebee; color: #c62828; }
.score {
display: inline-block;
margin-left: 16px;
padding: 4px 12px;
border-radius: 4px;
font-size: 14px;
}
.score-excellent { background-color: #e3f2fd; color: #1565c0; }
.score-pass { background-color: #fff3e0; color: #ef6c00; }
.score-fail { background-color: #fce4ec; color: #d81b60; }
</style>
</head>
<body>
<h2>用户列表</h2>
<ul class="user-list">
{{#each users}}
<li class="user-item">
<span class="user-name">{{name}}</span>
<span class="status-tag
{{#if (eq status 0)}}status-inactive
{{else if (eq status 1)}}status-normal
{{else if (eq status 2)}}status-banned
{{/if}}
">
{{#if (eq status 0)}}未激活
{{else if (eq status 1)}}正常
{{else if (eq status 2)}}封禁
{{/if}}
</span>
<span class="score {{scoreLevel score}}">积分：{{score}}</span>
</li>
{{/each}}
</ul>
</body>
</html>
`;
// 编译模板
const template = Handlebars.compile(templateStr);
app.get("/", (req, res) => {
// 模拟从SQL查询数据后渲染
const html = template({ users: mockUserData });
res.send(html);
});
app.listen(3000, () => {
console.log("服务运行在 https://www.ipipp.com:3000");
});五、注意事项
自定义助手的逻辑尽量简洁，复杂的业务逻辑建议放在后端处理后再传入模板，避免模板承担过多业务职责。
如果状态值较多，可以考虑将状态映射放在数据层处理，直接返回对应的CSS类名，减少模板中的条件判断。
Handlebars模板中的HTML特殊字符如
<、>如果需要原样输出，需要使用{{{{raw}}}}块或者Handlebars.SafeString，但需要注意XSS风险，非可信数据不要直接渲染未转义的内容。当数据量较大时，建议结合前端框架的虚拟列表能力，避免一次性渲染过多DOM节点影响性能。