如何在不转换的情况下访问内联脚本中的 PUG 传递对象答案

【问题标题】：How to access the into PUG passed object inside of an inline script without converting如何在不转换的情况下访问内联脚本中的 PUG 传递对象
【发布时间】：2020-12-01 16:25:40
【问题描述】：

是否可以在不使用!{JSON.stringify(object)}; 转换的情况下在内联脚本中访问传递给 PUG 的整个对象

 // renderController.js
 res.render('../events', {
    events: {[ {...}, {...}, ... ]},
  });

使用!{JSON.stringify(events)}; 将现有的date-objects 转换为strings，然后需要将其转换回来。

想要的行为：

 // events.pug
 script.
     console.log(events[0].date.toLocaleString());

【问题讨论】：

标签： javascript node.js express pug

【解决方案1】：

是否可以在不转换的情况下访问内联脚本中传递给 PUG 的整个对象？

不，不是。您的内联脚本在浏览器中运行。您传递给 Pug 脚本的对象仅存在于服务器上，并且早已不复存在，并且从未在浏览器中可用。

因此，您似乎已经知道，将此类数据从服务器共享到在浏览器中运行的内联脚本的唯一方法是将数据放入页面本身的 Javascript 变量中，这是最简单的方法这样做是在页面脚本内的某个变量定义中将其“渲染”为 JSON。然后将在内联脚本中建立一个包含所需数据的变量。

请注意，数据必须可序列化为 JSON 才能正常工作。诸如服务器端套接字对象之类的某些东西不能以这种方式传输到前端，因为它们包含对无法转换为 JSON 并且无论如何在不同计算机上都不会有用的本机对象的引用。

【讨论】：

【解决方案2】：

object 仅在您的 Pug 模板中定义，用于生成 HTML，然后发送到浏览器。

但可以做的是将您的 JSON 作为主标签的属性发送，例如

<div class="container" id="data-container" data-demo="Your-JSON-Data">
  ...
  ...
</div>

<script>
 const dataAsString = JSON.parse( $("#data-container").attr("demo"));

</script>

【讨论】：

当您可以直接在<script> 标签中生成变量时，为什么要将 JSON 作为标签的属性发送？