如何在外部script文件中访问Handlebars传递的user变量？

问题核心 #

Handlebars渲染的user变量是服务器端注入到HTML模板中的，外部script.js是客户端浏览器执行的，客户端全局作用域中并没有这个变量，所以直接访问会返回undefined。

解决方案 #

方法1：将变量挂载到全局window对象 #

在你的dashboard.hbs页面中，添加一个内联script标签，把user变量转成JSON字符串并赋值给window.user：

<script>
  // 用三个大括号{{{}}}避免Handlebars转义JSON内容
  window.user = {{{JSON.stringify user}}};
</script>

之后在外部script.js中，就可以直接通过window.user.username（或简写user.username）访问用户信息了。

方法2：通过DOM data属性传递变量 #

把用户信息存储到DOM元素的自定义data属性中，比如：

<!-- 在body标签中添加data-user属性 -->
<body data-user='{{{JSON.stringify user}}}'>

然后在外部script.js中读取并解析：

const userData = document.body.dataset.user;
const user = JSON.parse(userData);
console.log(user.username);

关于JSON Helper报错的处理 #

如果想用Handlebars的JSON Helper，需要先在服务器端的app.js中注册这个自定义Helper：

const hbs = require('hbs');

// 注册JSON Helper
hbs.registerHelper('json', function(context) {
  return JSON.stringify(context);
});

注册完成后，在dashboard.hbs中使用时要注意用三个大括号避免转义：

<script>
  window.user = {{{json user}}};
</script>

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