在 Javascript 逻辑中访问 EJS 变量答案

【问题标题】：Accessing EJS variable in Javascript logic在 Javascript 逻辑中访问 EJS 变量
【发布时间】：2012-07-02 15:19:12
【问题描述】：

我正在开发一个 Node.js 应用程序（这是一个游戏）。在这种情况下，我设置了一些代码，这样当一个人访问索引并选择一个房间时，他会被重定向到正确的房间。

现在，Express v2.5.8 就是这样完成的：

server.get("/room/:name/:roomId, function (req, res) {
  game = ~databaseLookup~
  res.render("board", { gameState : game.gameState });
}

在 board.ejs 中，我可以使用如下代码访问 gameState 方式：

<% if (gameState) { %>
  <h2>I have a game state!</h2>
<% } %>

有没有办法将它导入到我的 JavaScript 逻辑中？我希望能够做类似var gs = ~import ejs gameState~ 的事情，然后能够用它做任何我想做的事情——访问它的变量，将其打印到控制台进行验证。最终，我想用这个 gameState 做的是正确显示棋盘，为此我需要做一些事情，比如访问棋子的位置，然后在屏幕上正确显示它们。

谢谢！

【问题讨论】：

标签： javascript node.js express ejs

【解决方案1】：

您可以直接将gameState变量注入页面上的javascript。

<% if (gameState) { %>
     <h2>I have a game state!</h2>
     <script>
        var clientGameState = <%= gameState %>            
     </script>
<% } %>

另一个选项可能是在页面已经加载后向服务器进行 AJAX 回调，返回 gameState JSON，并将 clientGameState 设置为 JSON 响应。

您可能也对此感兴趣：How can I share code between Node.js and the browser?

【讨论】：

我决定在页面加载后使用 AJAX 调用。上面代码的问题是评估为 [object Object] 这根本不是我想要的。谢谢！
我在所有页面底部使用传递了一些标准内容，例如请求对象、用户对象、表单错误。
如果代码计算结果为 [object Object]，我建议使用 JSON.stringify(game.gameState) 服务器端。然后将字符串化的对象放入脚本标签中。由于 ejs 渲染通常会转义 HTML 的特殊字符，因此您需要在脚本标记中使用 var clientGameState = <%- gameState %> （而不是 <%= ）如果您还需要 gameState 来渲染页面，您可以执行 JSON.parse () 循环它等等。
按照@Matthias，我是这样做的：服务器端res.render('test', { images: JSON.stringify(images) })，客户端var test = JSON.parse('<%- images %>');。
函数变量呢？不能字符串化

【解决方案2】：

我遇到了同样的问题。我需要使用的数据不仅仅是渲染页面，而是在我的 js 脚本中。因为页面在渲染时只是字符串，所以必须将数据转成字符串，然后在js中再次解析。在我的例子中，我的数据是一个 JSON 数组，所以：

<script>
  var test = '<%- JSON.stringify(sampleJsonData) %>'; // test is now a valid js object
</script>

单引号不能与 stringify 的双引号混合。同样来自 ejs 文档：

"

对数组也可以这样做。只需连接数组然后再次拆分。

【讨论】：

单引号不起作用，但模板文字起作用
我相信这可能是不安全的，例如sampleJsonData 的内容包含恶意字符串，它们很容易脱离脚本上下文。这是一篇相关文章，涵盖了 Django 模板语言中的并行场景：adamj.eu/tech/2020/02/18/…
我不明白为什么会包含恶意字符串？你不能控制字符串中的内容吗？页面在服务器端生成并按原样发送到浏览器，并在那里解析。
单引号工作正常

【解决方案3】：

我觉得下面的逻辑更好，它对我有用。

假设传递给ejs页面的变量是uid，你可以有div标签的内容或者h标签的内容和传递的变量。您可以在脚本中访问 div 或 h 标记的内容并将其分配给变量。

下面的代码示例：（在 ejs 中）

<script type="text/javascript">
    $(document).ready(function() {
        var x = $("#uid").html(); 
        alert(x);  // now JS variable 'x' has the uid that's passed from the node backend.
    });
</script>

<h2 style="display:none;" id="uid"><%=uid %></h2>

【讨论】：

通过上面的代码，在查看源码的时候可以很容易的看到整个UID对象。这不是正确的方法，即使它有效

【解决方案4】：

在 EJS 模板中：
例如：- testing.ejs

<html>
<!-- content -->
<script>
    // stringify the data passed from router to ejs (within the EJS template only)
    var parsed_data = <%- JSON.stringify(data) %>  
</script>
</html>

在服务器端脚本中：
例如：Router.js

res.render('/testing', {
    data: data // any data to be passed to ejs template
});

在链接的 js（或 jquery）脚本文件中：
例如：- script.js 在 JavaScript 中：

console.log(parsed_data)

在 JQuery 中：

$(document).ready(function(){
    console.log(parsed_data)
 });

注意： 1. user - 在标签
中代替 = 2. 不能直接声明或使用从路由器传来的数据直接查看到链接的javascript或jquery脚本文件中。
3. 仅在 EJS 模板中声明并使用它任何链接的脚本文件。

我不确定，但我发现使用从路由器传递的数据在脚本文件或脚本标签中查看是最佳实践。

【讨论】：

【解决方案5】：

这对我有用。

// bar chart data
    var label = '<%- JSON.stringify(bowlers) %>';
    var dataset = '<%- JSON.stringify(data) %>';

    var barData = {
      labels: JSON.parse(label),
      datasets: JSON.parse(dataset)
    }

【讨论】：

【解决方案6】：

这应该可以工作

  res.render("board", { gameState : game.gameState });

在前端js中

const gameState = '<%- JSON.stringify(gameState) %>'

【讨论】：

【解决方案7】：

好吧，在这种情况下，您可以简单地使用输入文本来获取数据。在 firebase 中使用它很容易并且经过测试。

<input type="text" id="getID" style="display: none" value="<%=id%>">

【讨论】：

【解决方案8】：

您可以通过将后端js作为字符串来将后端js分配给前端ejs。

<script>
     var testVar = '<%= backEnd_Var%>';
</script>

【讨论】：

【解决方案9】：

我知道这个问题很久以前就得到了回答，但我想我会添加它，因为我遇到了需要不同解决方案的类似问题。

基本上我试图通过 javascript 逻辑访问一个 EJS 变量，它是一个 JSON 对象数组，如下所示：

<script>
   // obj is the ejs variable that contains JSON objects from the backend
   var data = '<%= obj %>';
</script>

当我尝试在数据上使用forEach() 时，我会得到错误，这是因为'<%= obj %>' 提供了一个字符串，而不是一个对象。

解决这个问题：

<script>
   var data = <%- obj %>;
</script>

删除字符串包装并更改为<%-（以免将html转义到缓冲区）后，我可以访问该对象并使用forEach()循环遍历它

【讨论】：