如何在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>

注意解析正在前端完成，所以你的對象回來了，而不是像前一個回答中那樣的字符串（由於字符串上沒有引號也會破壞）。