通过JavaScript访问Handlebars变量

Question

我正在为ExpressJS框架生成一个Handlebars视图，并且我需要从分离的JavaScript文件中访问我传递给视图的变量。

例如：

var foo = {{user.name}}

有人想到了什么主意吗？可以帮忙吗？

- PokeRwOw

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至少需要用引号括起来，这样它才能被理解为字符串值/文字。

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 = "john.doe"

- Jonathan Lonowski

---

谢谢你的帮助！我在任何地方都没有看到过这种方法：var foo = "{{user.name}}"; 这对我帮助很大 :) - PokeRwOw

我有一个 <script>var foo = {{{myJson}}}}</script>，其中myJson是一个相当大的对象，似乎handlebars无法解析它。只有当我尝试我的答案中提到的解决方案时，才能让它正常工作。 - Drkawashima

这个也可以：var foo = "{{user.name}}"; 谢谢！ - Abdullah Alkurdi

能否从*.js文件中获取值？还是我必须将值设置为元素属性"data-my-value"，然后以这种方式获取它？ - vik

这个解决方案不再起作用了吗？我在其他地方也看到过，但每当我声明一个变量分配给 {{{helper value}}}，我都会得到一个语法错误，第一个 { 作为意外的标记。人们如何在客户端JavaScript中将变量设置为具有三重括号的值？ - Matthew Wolman

Answer 2

Node可以像这样将编码的JSON传递给handlebars视图：

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

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

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

---

由于任何传递给 handlebars 视图的内容都会被注入到 HTML 中，因此您应该始终传递编码后的 JSON，并让视图解码它。

---

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

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

- Drkawashima

---

从render函数中的编码将我的数据搞成了无法使用的[object][object]字符串，所以我改用视图助手进行编码。此外，使用三个大括号{{{会导致语法错误，而双大括号则可以正常工作。总之，这个解决方案成功地指引了我正确的方向。 - RZKY

这对我有效，但仅当脚本标签直接在.hbs文件中时才起作用。如果我从另一个文件夹链接一个脚本文件，它不会识别编码文本。您知道是否可以访问外部脚本文件中的编码文本吗？在<script src="script/in/another/folder.js"></script>中访问它。 - Matthew Wolman

Answer 3

我也不知道如何在单独的js文件中完成这个任务。这些答案引导了我正确的方向，所以谢谢你！最终我在服务器端对数据进行了JSON字符串化，然后通过渲染将其传递到页面上。但是，我仍然无法让代码在单独的js文件中正常工作——这没关系。我的使用情况是用于Materialize输入表单自动完成。

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
})

客户端JavaScript

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

const customers = {{{customers}}}

- crevizzle

Answer 4

保存助手：

json: function (n: any) {
    return JSON.stringify(n)
},

发送：

<script src="/path/to/src" data="{{json data}}"></script>

获取：

const data= JSON.parse(document.body.querySelector('script[data]').getAttribute('data'))

- Akif Kara

Answer 5

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

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

- Growyn

---

只需在页面数据中添加第三个 {}，它就会自动不被转义。无需第二行。 - thecoolwinter