如何通过JavaScript访问Handlebars模板传递的对象变量

你之前的写法失败是因为两个核心问题：

1. 直接输出{{ListOfLoggedUsers}}时，Handlebars会调用数组的toString()方法，最终得到[object Object],[object Object]...这类无效的JS语法，无法被解析为对象数组
2. 双大括号{{ }}默认会转义所有HTML特殊字符（比如引号、尖括号），即使你输出的是JSON字符串，转义后的内容也不符合JS语法要求

方法1：修改服务端代码实现（推荐） #

第一步：服务端将数组序列化为JSON字符串 #

修改你的路由渲染代码，提前把对象数组转为JSON格式字符串传递给模板：

app.get('/private', requiresAuth(), function (req, res) {
// ... 原有逻辑
    res.render('private', {
        ListOfLoggedUsers: ListOfLoggedUsers,
        // 新增序列化后的JSON字段
        ListOfLoggedUsersJSON: JSON.stringify(ListOfLoggedUsers)
    });
})

第二步：模板内联JS中使用非转义语法读取 #

在内联脚本中用三个大括号{{{ }}}（Handlebars的非转义输出语法）直接读取序列化后的JSON内容：

<script>
var loggedUser = {{{ListOfLoggedUsersJSON}}};
console.log(loggedUser)
</script>

方法2：无需修改服务端代码，注册Handlebars助手实现 #

如果不想改动现有服务端传参逻辑，可以全局注册一个JSON序列化助手：

// 服务端注册Handlebars助手（示例基于express-handlebars）
handlebars.registerHelper('json', function(obj) {
  return JSON.stringify(obj);
});

模板内直接调用助手即可：

<script>
var loggedUser = {{{json ListOfLoggedUsers}}};
console.log(loggedUser)
</script>

注意事项 #

JSON标准不支持undefined类型，你示例数据里的undefined字段序列化后会自动转为null，如果业务需要区分undefined和null，可以在序列化时自定义转换规则，将undefined替换为自定义标识值，前端读取后再做还原。

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