如何使用Handlebar.js的function helpers正常展示本地变量？

问题原因 #

你遇到的问题通常是两个常见原因导致的：

1. Handlebars默认会对helper返回的字符串做HTML转义，避免XSS风险，所以你直接返回的HTML标签会被转义成纯文本展示，不会被解析为DOM元素
2. 自定义helper默认无法直接读取模板内的本地变量，你需要在调用时显式把user变量作为参数传入helper，否则helper内的user会是undefined，逻辑判断自然不符合预期

修正方案 #

你可以任选以下一种方案修改即可：

方案1：修改helper返回不转义的SafeString

将你helper中返回HTML字符串的逻辑，包裹在Handlebars.SafeString中，告诉Handlebars这段内容不需要转义，同时要确保你调用helper时传入了user参数：

// 示例helper写法
Handlebars.registerHelper('showMenu', function(user) {
  if(user && user.user_fullname) {
    // 已登录状态的菜单HTML
    return new Handlebars.SafeString(`<li class="nav-item">
      <a class="nav-link">欢迎 ${user.user_fullname}</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/logout">退出登录</a>
    </li>`)
  } else {
    // 未登录状态的菜单HTML
    return new Handlebars.SafeString(`<li class="nav-item">
      <a class="nav-link" href="/login">登录</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/register">注册</a>
    </li>`)
  }
})

模板调用时要显式传参：

{{showMenu user}}

方案2：模板调用时用三个大括号跳过转义

如果你不想修改helper代码，只需要在模板调用helper时，把原来的两个大括号{{ }}改成三个大括号{{{ }}}，同时传对user参数即可：

{{{showMenu user}}}

三个大括号的语法就是明确告诉Handlebars，不需要对这段helper的返回值做HTML转义。

注意事项 #

因为跳过了默认的HTML转义，如果你展示的user.user_fullname是用户可自定义的内容，建议你先对该字段做XSS过滤，避免恶意脚本注入风险。

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