Handlebars模板if else判断订单状态颜色报错排查

• Handlebars 原生#if块级助手仅支持真值判断，不支持直接在模板标签内编写==/===等比较运算逻辑，同时禁止在{{}}语法块内部嵌套另一层{{}}包裹变量，这是触发解析错误的直接原因。
• 你写的语法存在基础格式错误：块级助手必须加#前缀（正确写法为{{#if}}而非{{if}}），比较逻辑不能直接写在模板标签参数位。

方案1：注册自定义判断助手（推荐，可复用） #

如果你使用的是Node.js + express-handlebars技术栈，在初始化模板引擎时注册一个相等判断的自定义助手即可：

const exphbs = require('express-handlebars');
// 配置模板引擎
app.engine('handlebars', exphbs.engine({
  helpers: {
    // 相等判断助手，接收两个参数返回是否全等
    eq: function(val1, val2) {
      return val1 === val2;
    }
  }
}));
app.set('view engine', 'handlebars');

在listorder.handlebars中使用子表达式调用助手完成判断，不需要给变量额外套{{}}：

{{#if (eq deliveryStatus "Delivered")}}
   <td class="align-middle" style="color: green;">
      {{deliveryStatus}}
   </td>
{{else}}
   <td class="align-middle" style="color: red;">
      {{deliveryStatus}}
   </td>
{{/if}}

方案2：后端预处理状态样式（无需修改模板配置） #

如果不想注册自定义助手，可以在后端查询到订单列表后，提前给每条订单数据计算好对应的文字颜色，再传给模板：

// 假设从数据库查询到的订单列表为orderList
orderList.forEach(order => {
  // 提前绑定状态对应颜色
  order.deliveryColor = order.deliveryStatus === 'Delivered' ? 'green' : 'red';
});
// 渲染页面时传入处理后的数据
res.render('listorder', { orderList });

模板中直接使用传入的颜色值即可，无需写条件判断：

<td class="align-middle" style="color: {{deliveryColor}};">
  {{deliveryStatus}}
</td>

你当前新增订单页用两个同名复选框采集配送状态，虽然写了ensureOneCheckJS逻辑限制单选，但语义上配送状态是互斥选项，替换为type="radio"的单选框更符合规范，不需要额外JS也能保证只能选一个值。

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