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

问题描述

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模板中传递对象以使用它？

解决方法

我认为有一些事情我们需要进行审查才能得出解决方案。

首先，我们必须了解“三重胡子”标签在车把中的含义。默认情况下，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>

第二，我们必须了解当给定JavaScript对象作为双（或三）花括号之间的表达式来评估时，Handlebars的作用。 Handlebars实际上是用对该表达式的字符串化评估来替换该表达式-如果您在控制台中登录data.toString()，则会得到此结果。对于一个对象，字符串化的值将类似于[object Object]。参见answer进行讨论。

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

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

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

我们的模板变为：

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

express-handlebars handlebars.js javascript