访问 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/说

2. <% 'Scriptlet' 标签，用于控制流，无输出
3. <%= 将值输出到模板中（HTML 转义）
4. <%- 将未转义的值输出到模板中
5. <%# 注释标签，不执行，不输出

您可以尝试在 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 扩展名的单独文件中使用相同的代码，它将不起作用。 您在浏览器控制台中收到“意外令牌 <”错误。

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