[英]How to pass an object to a .handlebars template and use it in a javascript code block?
server.js:服务器.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>
Browser Console Error: Uncaught SyntaxError: missing ] in computed property name
浏览器控制台错误:
Uncaught SyntaxError: missing ] in computed property name
错误: Uncaught SyntaxError: missing ] in computed property name
How can I pass the object to use it in .handlebars template within a script code block?如何传递对象以在脚本代码块内的 .handlebars 模板中使用它?
I think there a few things we need to review in order to arrive at a solution.我认为我们需要审查一些事情才能找到解决方案。
First, we must understand what the triple-mustache tag means in Handlebars.首先,我们必须了解 Handlebars 中三重胡子标签的含义。 By default, Handlebars will HTML-escape its output.
默认情况下,Handlebars 将HTML 转义其输出。 This is a best practice for preventing Cross-Site Scripting (XSS) .
这是防止跨站脚本 (XSS)的最佳实践。 This means that with input
{ data: "<p>Hello, World!</p>" }
, a Handlebars template {{ data }}
will output:这意味着对于输入
{ data: "<p>Hello, World!</p>" }
,Handlebars 模板{{ data }}
将输出:
<p>Hello, World!</p>
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.在某些情况下,人们不希望 Handlebars 对其输出进行 HTML 转义,为此 Handlebars 提供了三重胡子标记,它将输出未转义的 HTML。 For the same input and template above, the output would be:
对于上面相同的输入和模板,输出将是:
<p>Hello, World!</p>
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 在将 JavaScript 对象作为双(或三)花括号之间的表达式进行计算时的作用。 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. Handlebars 本质上是用该表达式的字符串化评估替换该表达式 - 如果您在控制台中记录
data.toString()
就会得到它。 For an object, the stringified value will be something like [object Object]
.对于一个对象,字符串化的值将类似于
[object Object]
。 See this answer for a discussion.请参阅此答案以进行讨论。
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.对于我们的问题,我们必须弄清楚如何让 Handlebars 呈现我们的整个
data
对象,并以有效的 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.由于 Handlebars 将呈现一个字符串,我们可以将一个字符串化的 JSON 对象传递给它,并使用三重胡子来确保我们的引号不会被转义。
Our route handler becomes:我们的路由处理程序变为:
res.render('home', { data: JSON.stringify(data) });
And our template becomes:我们的模板变成了:
<script type="text/javascript">
var data = {{{ data }}};
console.log(data.one);
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.