如何将对象传递给 .handlebars 模板并在 javascript 代码块中使用它？答案

【问题标题】：How to pass an object to a .handlebars template and use it in a javascript code block?如何将对象传递给 .handlebars 模板并在 javascript 代码块中使用它？
【发布时间】：2022-01-18 00:41:18
【问题描述】：

server.js：

app.get('/home', function (req, res) {
      data['one'] = "first";
      data['two'] = "secound";
      res.render('home', { data });
});

home.handlebars：

<script type="text/javascript">
      var data = { {{{data}}} };
      console.log(data.one);
</script>

浏览器控制台错误：Uncaught SyntaxError: missing ] in computed property name

如何传递对象以在脚本代码块内的 .handlebars 模板中使用它？

【问题讨论】：

标签： javascript node.js handlebars.js express-handlebars

【解决方案1】：

我认为我们需要审查一些事项才能找到解决方案。

首先，我们必须了解Handlebars 中的triple-mustache 标签的含义。默认情况下，Handlebars 将HTML-escape 输出。这是防止Cross-Site Scripting (XSS) 的最佳实践。这意味着输入{ data: "<p>Hello, World!</p>" }，Handlebars 模板{{ data }} 将输出：

&lt;p&gt;Hello, World!&lt;/p&gt;

在某些情况下，不希望 Handlebars 对其输出进行 HTML 转义，为此，Handlebars 提供了triple-mustache tag，它将输出未转义的 HTML。对于上面相同的输入和模板，输出将是：

<p>Hello, World!</p>

其次，我们必须理解 Handlebars 在给定一个 JavaScript 对象作为要计算的双（或三）花括号之间的表达式时会做什么。 Handlebars 本质上是用对该表达式的字符串化求值替换该表达式 - 如果您在控制台中记录 data.toString()，这就是您将得到的结果。对于一个对象，字符串化的值将类似于[object Object]。请参阅此answer 进行讨论。

对于我们的问题，我们必须弄清楚如何让 Handlebars 渲染整个 data 对象，并以有效的 JavaScript 格式进行渲染。由于 Handlebars 会渲染一个字符串，我们可以传递一个字符串化的 JSON 对象并使用三重胡须来确保我们的引号不会被转义。

我们的路由处理程序变成：

res.render('home', { data: JSON.stringify(data) });

我们的模板变成：

<script type="text/javascript">
    var data = {{{ data }}};
    console.log(data.one);
</script>

【讨论】：

你仍然必须对输出进行 html 转义，即使 <script> 标签内的规则有些不同