Handlebars模板：如何在同一div中同时渲染两个变量并实现条件判断？

Handlebars内置的{{#if}}助手不支持直接使用&&这类逻辑运算符，你可以通过以下几种可行方案实现需求：

方法1：嵌套{{#if}}判断 #

用两层嵌套的if实现“两个变量都存在才渲染”的逻辑，这是最直接的原生写法：

{{#if item_link}}
  {{#if item_value}}
    <div class="your-class">
      {{item_link}} {{item_value}}
    </div>
  {{/if}}
{{/if}}

方法2：注册自定义逻辑与助手 #

自己注册一个and助手，让模板支持逻辑与判断：

前端浏览器环境注册示例： #

Handlebars.registerHelper('and', function(a, b) {
  return a && b;
});

Node.js环境注册示例（以express-handlebars为例）： #

const hbs = require('express-handlebars');
hbs.create({
  helpers: {
    and: function(a, b) {
      return a && b;
    }
  }
});

之后在模板中即可这样使用：

{{#if (and item_link item_value)}}
  <div class="your-class">
    {{item_link}} {{item_value}}
  </div>
{{/if}}

方法3：提前在数据层处理逻辑 #

如果不想修改模板或注册助手，可以在传入Handlebars的数据里预先计算判断结果：

// 假设原始数据为data
data.isBothExist = data.item_link && data.item_value;

然后在模板中直接判断这个预定义字段：

{{#if isBothExist}}
  <div class="your-class">
    {{item_link}} {{item_value}}
  </div>
{{/if}}

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