46

我正在开发一个 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 做的是正确显示棋盘，为此我需要做一些事情，比如访问棋子的位置，然后在屏幕上正确显示它们。

谢谢！

4

9 回答 9

54

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

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

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

您可能还对此感兴趣：如何在 Node.js 和浏览器之间共享代码？

于 2012-07-02T17:27:00.363 回答
25

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

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

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

"<%- 将未转义的值输出到模板中"

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

于 2019-12-02T10:21:52.367 回答
10

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

假设传递给 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>
于 2012-09-29T19:26:13.050 回答
7

在 EJS 模板中：
ex:- 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）脚本文件中：
ex:- script.js 在 JavaScript 中：

console.log(parsed_data)

在 JQuery 中：

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

注意： 1. user - 而不是 <% %> 标签中的 =
2. 您不能声明或使用从路由器传递的数据直接查看链接的 javascript 或 jquery 脚本文件。
3. 仅在 EJS 模板中声明 <% %> 并将其用于任何链接的脚本文件。

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

于 2020-05-30T13:56:16.573 回答
3

这对我有用。

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

    var barData = {
      labels: JSON.parse(label),
      datasets: JSON.parse(dataset)
    }
于 2020-10-11T13:02:17.773 回答
3

这应该有效

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

在前端 js

const gameState = '<%- JSON.stringify(gameState) %>'
于 2021-04-07T13:30:14.273 回答
1

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

<input type="text" id="getID" style="display: none" value="<%=id%>">
于 2019-08-23T14:38:23.390 回答
1

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

<script>
     var testVar = '<%= backEnd_Var%>';
</script>
于 2021-07-29T14:42:30.667 回答
1

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

本质上，我试图通过 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()

于 2021-11-24T17:03:26.910 回答