Express接口返回空/undefined/null值时如何隐藏hbs模板对应DOM元素

实现方案 #

步骤1：优化服务端传参逻辑 #

你当前使用模板字符串直接拼接字段值的写法，会把null/undefined转为字符串"null"/"undefined"，导致模板无法正确识别空值，需要先做值过滤：

var obj = JSON.parse(body)

res.render("index", {
  name: obj.data?.name || '',
  uname: obj.data?.username || '',
  bio: obj.data?.bio || '',
  location: obj.data?.location || '',
  link: obj.data?.website || '',
  join: obj.data?.join || '' // 模板中用到了join字段，记得补充传参
})

步骤2：修改hbs模板添加空值判断 #

Handlebars内置的{{#if}}助手会自动将空字符串、null、undefined识别为假值，只需要给每个需要隐藏的父div套上判断块即可：

<div class="ml-9 w-full mt-1 px-3 mb-5 inline-block">
    {{#if location}}
    <div class="inline-block mr-5">
        <i class="fas fa-map-marker-alt text-lg opacity-75 inline"></i>
        <p  class="text-xl inline ml-2 bio">{{location}}</p>
    </div>
    {{/if}}

    {{#if link}}
    <div class="inline-block mx-5">
        <i class="fas fa-link text-lg opacity-75 inline"></i>
        <p  class="text-xl inline ml-2 link text-blue-400">{{link}}</p>
    </div>
    {{/if}}

    {{#if join}}
    <div class="inline-block mx-5">
        <i class="fas fa-calendar-alt text-lg opacity-75 inline"></i>
        <p  class="text-xl inline ml-2 bio">{{join}}</p>
    </div>
    {{/if}}
</div>

可选兼容方案 #

如果无法修改服务端代码，也可以直接在模板中对字符串类型的空值做判断：

{{#if (and location (ne location 'null') (ne location 'undefined'))}}
<!-- 对应div代码 -->
{{/if}}

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