访问 Javascript 文件中传递的 EJS 变量

Question

RESTful 路由js文件：

// index route - show all todos
router.get("/", middleware.isLoggedIn,function(req,res) {
  Todo.find({ "author.id" : req.user._id}, function(err, allTodos) {
    if(err) {
      console.log(err);
    } else {
      res.render("todo/index", {todos: allTodos});
    }
  });        
});

我的 index.ejs 文件有：

<script src="/scripts/todoCalendar.js"></script>

在body 标记的末尾，我想在我的 todoCalendar.js 文件中访问传递的变量todos。 我试着把

<script>
  var x= <%= todos %>
</script>

但当我尝试在我的 todoCalendar.js 文件中执行 console.log(x) 时，它说 x 未定义。

非常感谢任何帮助。

Answer 1

解决问题的三种方法...

1. 变体

   <script>
       var x = "<%= todos %>";
       console.log(x); 
   </script>
   

2. 变体

   <script>
       var x = "<%- todos %>";
       console.log(x); 
   </script>
   

3. 变体 [XD]

   HTML：

   <p id="yy" style="display:none"><%= todos %></p>
   

   Javascript：

   <script>
       var x = document.getElementById("yy").innerText;
       console.log(x); 
   </script>
   

Answer 2

通过格式化您从服务器获得的 JSON 的 html 打印并使用 javascript（我的案例 jQuery）来检索该文本、存储它并从 html 中删除它:)

EJS：

<span id='variableJSON' hidden>
    <%= JSON.stringify(passedInEjsVariable); %>
</span>

JavaScript：

var variableJSON = JSON.parse($('#variableJSON').text());
$('#variableJSON').remove();

Answer 3

只有这在我的情况下有效。所有带有 "" 或带有

<script>
  var todos = <%-JSON.stringify(todos)%>;
  for (var item of todos) {
    console.log(item)
  }
</script>

注意事项：如果使用 VS Code 格式保存 .ejs 文件， 会拆分为 你得到 Uncaught SyntaxError: Unexpected token ';' 并且一秒钟前有效的东西突然停止工作。

Answer 4

http://ejs.co/ 说

你可以尝试在 ejs 中使用

Answer 5

恐怕您不能在扩展名为 .js 的文件中使用 EJS 标记。

如果把js代码放在EJS文档的最下面，就没有问题了。

在后端你做：

res.render('todo/index', {todos: JSON.stringify(alltodos)}); 

在你的 ejs 文件中你做：

<script>
 var x= <%- todos %>;
 console.log(x);
</script>

这很好用。我刚刚测试了我的项目。

如果您想在带有 .js 扩展名的单独文件中使用相同的代码，它将不起作用。您在浏览器控制台中收到“意外令牌

您唯一的选择是将 todos 打印到 ejs 文件内的隐藏 DIV 中，然后通过 javascript 进入（您可以使用 innerText 或 innerHTML）并将其存储在变量中。有点hacky，但它可以解决问题。