【问题标题】：How can I access ejs variables in an external script如何在外部脚本中访问 ejs 变量
【发布时间】：2017-02-07 15:20:30
【问题描述】：

当我使用 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？

【问题讨论】：

标签： javascript node.js ejs

【解决方案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 访问它。

【讨论】：

【解决方案2】：

您可以将变量放在数据值中，以便在脚本中使用 js 或 jquery 获取，例如：

查看 ejs 端：

<div class='test' data-test-value='<%= JSON.stringify(myVar) %'></div>

js脚本端：

-如果你使用 jquery：

var $test = $('.test').attr('data-test-value')
  alert($test);

-如果你使用 vanillaJs：

    var test = document.getElementsByClassName('test');
    var testValue = test[0].dataset.testValue;
    alert(testValue)

如果我的语法错误，我不会测试我的原版脚本参考文档

【讨论】：