如何将对象传递到.handlebars模板并在javascript代码块中使用它? [英] How to pass an object to a .handlebars template and use it in a javascript code block?

问题描述

server.js:

server.js:

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

home.handlebars:

home.handlebars:

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

浏览器控制台错误:未捕获的SyntaxError:缺少]计算属性名称

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

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

推荐答案

我认为，为了达成解决方案，我们需要回顾一些事情.

I think there a few things we need to review in order to arrive at a solution.

首先，我们必须了解三重胡子"标签在车把"中的含义.默认情况下，Handlebars将 HTML逸出其输出.这是防止跨站点脚本(XSS)的最佳做法.这意味着在输入 {data:< p> Hello，World！/p>"的情况下，} ，Handlebars模板 {{data}} 将输出:

First, we must understand what the triple-mustache tag means in Handlebars. By default, Handlebars will HTML-escape its output. This is a best practice for preventing Cross-Site Scripting (XSS). This means that with input { data: "<p>Hello, World!</p>" }, a Handlebars template {{ data }} will output:

<p>Hello, World!</p>

在某些情况下，不希望Handlebars对其输出进行HTML转义，为此Handlebars提供了三重胡子标记，它将输出未转义的HTML.对于上面相同的输入和模板，输出为:

There are some situations in which one does not want Handlebars to HTML-escape its output, and for this Handlebars offers the triple-mustache tag, which will output the unescaped HTML. For the same input and template above, the output would be:

<p>Hello, World!</p>

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

Second, we must understand what Handlebars does when given a JavaScript object as the expression between the double- (or triple-) curly braces to evaluate. Handlebars is essentially replacing the expression with the stringified evaluation of that expression - it's what you would get if you logged data.toString() in your console. For an object, the stringified value will be something like [object Object]. See this answer for a discussion.

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

For our problem, we must figure out how we can get Handlebars to render our entire data object and do so in a format that is valid JavaScript. Since Handlebars will render a String, we could pass it a stringified JSON object and use the triple-mustache to ensure that our quotes are not escaped.

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

Our route handler becomes:

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

我们的模板变为:

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

这篇关于如何将对象传递到.handlebars模板并在javascript代码块中使用它?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！