如何在 EJS forEach 循环中运行 JQuery 代码？答案

【问题标题】：How do you run JQuery code inside an EJS forEach loop?如何在 EJS forEach 循环中运行 JQuery 代码？
【发布时间】：2015-06-02 20:05:50
【问题描述】：

如何在 EJS forEach 循环中运行 JQuery 代码？我正在尝试从以 Express 作为引擎的 Node.js 获取的 mongoDB 文档中读取。对于每个项目，我想创建一个 li 项目，项目名称作为列表项文本。目前，这就是我所拥有的：

    <% data[0].user_projects.forEach(function(project) { %>

            $('#projUL').append('<li><%= project.project_name %></li>');

    <% }); %>

但是，当我转到该页面时，它不会引发任何错误；但在源代码中它显示了以下脚本，但它从不呈现到页面：

    <script>

            $('#projUL').append('<li>Express Project 1</li>');

    </script>

如果我删除脚本标签，它只会插入相同代码的纯文本。所以，我无法弄清楚如何在 EJS forEach 循环中获取 jQuery 代码。无论我做什么，它都不会呈现结果。它似乎只接受纯文本。

【问题讨论】：

呃，你不知道吗？使用 ejs templates 发出 html，而不是生成 jquery 代码！
所以没有办法完成我想要做的事情？ EJS只能驱逐纯html？
当然可以（可能在您实例化<ul id=projUL> 后，您的脚本就可以工作），但我的意思是您不应该这样做。我看不出有什么理由不在这里使用纯 html。
我正在尝试将这些 li 连接到另一个动态创建的 div 中的 li，并且我需要使用计数器变量来连接它们，因为我不知道有多少进来。我在页面稍后实例化了 ul，但它拒绝运行 jquery。
无论如何，imo 你应该先尝试通过服务器端编程解决这个问题，然后再向它抛出 jQuery。顺便说一句："instantiated later in the page" is very much the key here.

标签： jquery ejs

【解决方案1】：

在脚本执行时，ul projUL 很可能不在 DOM 中。如果您仍然需要在不使用模板的情况下将一些数据写入 HTML，您可以尝试使用 jQuery 就绪事件。首先使用脚本添加数据服务器端，然后在创建 UL 后附加它。

//this will be global or use your own scope.
window.user_projects = <%= data[0].user_projects %>;
$(document).ready(function (){
   var $list = $('#projUL');
   window.user_projects.forEach(function () {
        $list.append('<li><%= project.project_name %></li>');
   });
});

【讨论】：

谢谢，这是一个很棒的见解！