javascript - 如何在外部脚本中访问 ejs 变量

Question

当我使用 NodeJS 将变量传递给我的 html 页面时，我可以使用内联脚本访问它，如下所示:

// passing myVar from the server
router.get('/', (req, res) => {
  res.render('index', { myVar: 'test'});
});

// access in index.ejs
<script>
  let myVar = <%- JSON.stringify(myVar) %>;
  alert(myVar);
</script>

如果我尝试在这里使用外部脚本而不是内联脚本，我会遇到使用 ejs 语法的错误 <%- %> .如何在外部脚本中访问 myVar？

Answer 1

<%-之间的代码和 %>是 服务器端代码 .

如果你把它从你的 EJS 模板文件中移到一个静态的 JS 文件中，那么你 不能获取数据。它不会被替换，您会将 EJS 模板发送到浏览器，而不是在服务器上对其进行处理以生成文档。

如果您将其移出生成 HTML 的 EJS 模板文件并移入生成 JavaScript 的不同 EJS 模板文件中，那么它将正常工作(除了在您的服务器端代码中它将具有不同的 URL 和不同的端点，因此您将需要移动填充您尝试访问的变量的服务器端代码)。

您有两个合理的选择:

有两个脚本元素。

获取页面数据的一种:

<script>let myVar = <%- JSON.stringify(myVar) %>;</script>

还有一个包含 JavaScript 逻辑:

<script src="/js/logic.js"></script>

将生成的数据移入页面

<div data-myVar="<%- JSON.stringify(myVar).replace(/"/g, "&quot;"); %>">...</div>

... 然后通过 DOM 访问它。