Handlebars模板if条件语句失效直接显示在HTML页面的问题

你当前的写法存在两个核心问题：

• 语法混用：<% %>是EJS等模板引擎的逻辑定界符，Handlebars完全不识别该语法，因此模板引擎不会解析这部分代码，会将整段逻辑原样输出到最终渲染的HTML中，这就是代码直接暴露在页面上的直接原因。
• 逻辑写法不符合Handlebars规范：Handlebars不支持在模板内直接编写原生JS的if/else、相等判断这类逻辑，它有专属的助手语法规则，默认内置的{{#if}}仅能判断变量是否为真值，无法直接做相等比较。

方案1：使用比较助手实现条件判断 #

首先在JS渲染逻辑中提前注册Handlebars相等判断助手：

// 注册eq相等判断助手
Handlebars.registerHelper('eq', function(val1, val2, options) {
  return val1 === val2 ? options.fn(this) : options.inverse(this);
});

之后在模板中使用Handlebars原生的条件语法，配合注册好的eq助手实现判断：

{{#if (eq status_ticket "fechado")}}
 <td><span class="badge badge-outline-success">{{status_ticket}}</span></td>
{{else}}
 <td><span class="badge badge-outline-dark">{{status_ticket}}</span></td>
{{/if}}

提示：如果你使用的是基于Handlebars二次封装的框架（比如Ghost、Ember、部分低代码平台的模板层），这类框架通常已经内置了eq比较助手，可以直接在模板中使用，无需手动注册。

方案2：提前在数据层处理样式类名 #

如果不想注册自定义助手，也可以在把数据传入模板之前，提前在JS逻辑里判断好要使用的class类名，再传给模板直接渲染，模板里不需要写任何判断逻辑：

// 渲染前处理数据
const templateData = {
  status_ticket: 'fechado', // 原始状态值
  statusBadgeClass: status_ticket === 'fechado' ? 'badge-outline-success' : 'badge-outline-dark'
}
// 传入模板渲染

模板中直接使用处理好的变量即可：

<td><span class="badge {{statusBadgeClass}}">{{status_ticket}}</span></td>

内容的提问来源于stack exchange，提问作者Thiago