通过 javascript 访问 handlebars 变量

Question

我正在为 express js 框架生成把手视图，我需要从单独的 JavaScript 文件中访问我传递给视图的变量。

例如：

var foo = {{user.name}}

有人有想法吗？帮手？

Answer 1

如果要将 user.name 的值包含在 <script> 中，则需要将其输出为有效的 JavaScript 表达式，这将把它重新计算为代码。

目前，如果 user.name 是 "john.doe"，则生成的脚本将是：

var foo = john.doe; // `john` is treated as an object with a `doe` property

user.name 至少需要用引号引起来才能理解为字符串 value/literal.

var foo = "{{user.name}}";

// result
var foo = "john.doe";

你也可以利用JSON和JavaScript在语法上的相似性，输出JavaScript可以理解为表达式的JSON，并且已经包含引号。

Handlebars.registerHelper('json', function (content) {
    return JSON.stringify(content);
});

var foo = {{{json user.name}}};

// result
var foo = "john.doe";

请注意最后一个示例中的三元组 {{{...}}} 以禁用 HTML 编码，因此您不会得到：

var foo = &quot;john.doe&quot;

Answer 2

节点可以像这样将编码的 JSON 传递给 handlebars-view：

result.render('index', { 
  encodedJson : encodeURIComponent(JSON.stringify(jsonData))
});

handlebars-view 可以像这样解码和解析 json：

<script>
  var decodedJson = decodeURIComponent("{{{encodedJson}}}");
  var jsonObj = JSON.parse(decodedJson);
</script>

由于任何传递给 handlebars-view 的内容基本上都会直接注入 HTML，因此您应该始终传递经过编码的 json 并让视图对其进行解码。

我尝试了此线程中的其他建议。但是他们将未编码的 JSON 注入到 handlebars 视图中，这总是给我解析错误。我不知道人们是如何让它工作的，因为 Handlebars 似乎会将变量解析为纯文本。

我没有仔细阅读 Handlebars 解析器的工作原理 - 但在我看来，唯一安全的选择是使用编码 JSON，就像我在示例中建议的那样。

Answer 3

我也不知道如何在单独的 js 文件中执行此操作。这些答案使我朝着正确的方向前进，谢谢！在通过渲染将数据传递到页面之前，我最终 JSON 将 server-side 上的数据字符串化。但是，我仍然无法让代码在单独的 js 文件中工作——这很好。我的用例是 Materialise 输入表单自动完成。

node.js

// code is inside of a router.get block, therefore access to the response(res)

let customerData = {}
// add customer data with a loop, or whatever

const customers = JSON.stringify(customerData)

res.render('path/to/page', {
    customers
})

client-side js

// code placed within script tags of the handlebars file, not a separate js file

const customers = {{{customers}}}

Answer 4

var pageData = "{{pageData}}";
pageData = pageData.replace(/&quot;/g, `"`);
pageData = JSON.parse(pageData)

其中 pageData 是一个对象（可能包含其他对象）

通过 javascript 访问 handlebars 变量

Accessing handlebars variable via javascript

javascript

node.js

express

handlebars.js

node.js

client-side js