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

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

这是一个要点，因为如果你的一些对象值中包含“或”，那么它会让人感到困惑，然后你尝试在前端解析它。

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>

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