Question

我像这样渲染我的页面：

response.render('index', {
    data: list // the `list` is an array variable
});

在首页，我希望将data存储为globe变量，所以我尝试了：

<script>
   window.app = <%= data %>
</script>

但结果是：

window.app = [object Object],[object Object],[object Object]

那么我怎么能以正确的方式做到这一点？

Answer 1

您可以将数据字符串化为JSON，它是javascript的子集，并将被解析为确切的数据结构。同时使用<%- expression %>确保您的javascript不会被转义。

<script>
   window.app = <%- JSON.stringify(data) %>
</script>

请注意，这不包括函数，它会抛出循环数据结构。但像[{ a : { b : 3 }}]这样的东西应该可以正常工作。日期也会转换为字符串。

Answer 2

这是一个要点，因为如果你的某些对象值具有＆＃34;它可能会让人感到困惑。或者＆＃39;在它们中，然后你尝试在前端解析它。

tl; dr - 我们转义斜杠和引号，因为那些会解析字符串化的字符串。

https://gist.github.com/danschumann/ae0b5bdcf2e1cd1f4b61

js：

myObject = { ... }
// This should cover all the bases for what kinds of text the object has.
this.injectString = JSON.stringify( myObject ).replace(/\\/g, '\\\\').replace(/"/g, '\\\"')

和html：

We only worry about parsing now, since everything should have been properly escaped
<script>
  window.myObjectFrontend = JSON.parse("<%- @injectString %>");
</script>

注意正在前端完成解析，所以你的对象又回来了，而不仅仅是你在上一个答案中的字符串（由于字符串上没有引号，它也会中断）。

如何在node.js ejs模板中将变量从后端传递到前端

2 个答案: