时间戳

首页 > 解决方案 > How to pass an object to a .handlebars template and use it in a javascript code block?

javascript - How to pass an object to a .handlebars template and use it in a javascript code block?

问题描述

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>

Browser Console Error: Uncaught SyntaxError: missing ] in computed property name

How can I pass the object to use it in .handlebars template within a script code block?

标签： javascriptnode.jshandlebars.jsexpress-handlebars

解决方案

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

首先，我们必须了解Handlebars 中的triple-mustache 标签的含义。默认情况下，Handlebars 会对其输出进行HTML 转义。这是防止跨站点脚本 (XSS)的最佳实践。这意味着使用 input { data: "<p>Hello, World!</p>" }，Handlebars 模板{{ data }}将输出：

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

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

<p>Hello, World!</p>

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

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

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

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

我们的模板变成：

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

推荐阅读