Question

我需要在一些EJS代码中使用Javascript变量（在前端定义），如下所示：

var selected = 1;
<% for (var i=0; i < supplies.length; i++) { %>
    if (i == selected) {
        console.log(supplies);    
    }
<% } %>

我正在使用EJS，Express.js和socket.io。我可以通过向我的Node.js服务器实例发送消息将Javascript变量转换为EJS变量，但这有点愚蠢......有没有办法在EJS中使用Javascript变量？

编辑：我想在用户从下拉菜单中选择一个项目后访问耗材，一个javascript数组。当他选择这个项目时，带有上述代码的javascript函数需要访问一些EJS。这就是我需要在EJS中使用普通Javascript变量的原因。

Answer 1

我可以将JavaScript变量传递给模板吗？：

可以将更多数据添加到模板中并重新渲染它，但不是以您正在考虑的方式，而不是向服务器发出另一个请求（除非是为了获取更多数据，而不是为了获得更多数据） HTML）。

的解决方案：

如果没有更多细节，这个问题将难以回答，因此我将对为什么您想要将选定值传递到EJS模板做出一些假设。我将尽力以有限的信息回答这个问题。

您的用户似乎正在页面上执行某些操作，例如选择清洁耗材，并且您希望根据用户选择的元素以不同方式呈现数据。为此，您可以重新呈现模板并传入标识所选元素的数据，使用视图助手将特定类应用于所选元素：

这是修改后的cleaning.ejs模板，使用视图助手添加了类：

<强> cleaning.ejs：

<script> // NOTE: even if uncommented, JavaScript inside a template will not run. // var selected = 1; </script> <h1><%= title %></h1> <ul> <% for(var i=0; i<supplies.length; i++) { %> <li>  <a class='<%= supplies[i].selected %>' href='supplies/<%= supplies[i].value %>'> <%= supplies[i].value %> </a> </li> <% } %> </ul>

呈现的HTML如下所示：

<script> /** NOTE: Script blocks will not fire in rendered templates. They are ignored // var selected = 1; </script> <h1>Cleaning Supplies</h1> <ul> <li> <a class="" href="supplies/Broom"> Broom </a> </li> <li>  <a class="selected" href="supplies/mop"> mop </a> </li> <li> <a class="" href="supplies/Hammer"> Hammer </a> </li> </ul>

此视图使用以下JavaScript代码呈现：

// modified data structure so that array of supplies contains objects // with the name of the item and whether or not it's selected. data = { "title":"Cleaning Supplies", "supplies":[ { "value":"Broom", "selected":"" }, { "value":"mop", "selected":"selected" }, { "value":"Hammer", "selected":"" } ] }; // pass data into template and render var html = new EJS({url: 'cleaning.ejs'}).render(data); // add HTML to the DOM using a <div id="container"></div> wrapper. document.getElementById("container").innerHTML = html;

如您所见，supplies [i] .selected将所选类应用于在数据结构中标记为选中的元素。我修改了href值，以便它访问第i个数组项中的对象而不是数组本身的值。

现在，当修改所选项目时，我们只需修改数据变量，重新渲染EJS模板，然后将其添加到DOM中。

将这个CSS放在HTML文档的头部，你会看到类似于下面显示的内容：

<style> .selected { color:red; } </style>

为什么模板中的JavaScript无法运行：

您尝试用来操作JavaScript值或在EJS模板中使用JavaScript值的方法将无效。这主要与执行JavaScript时的上下文有关。

您认为EJS模板是在客户端编译的，这是正确的。但是，视图助手中的JavaScript独立于全局上下文中的JavaScript执行。从查看ejs.js源代码看，好像在进程中使用了eval。

此外，EJS将呈现的HTML作为字符串返回，EJS的文档指示我们使用innerHTML将呈现的模板字符串注入DOM：

document.getElementById("container").innerHTML = html;

无论您使用何种视图技术，某些浏览器在JavaScript方面的基本事实之一是：某些浏览器可能无法使用innerHTML评估添加到DOM的<script>块。

换句话说，在我的测试模板中，当我尝试添加脚本标记以将所选值输出到控制台时，我可以看到添加了脚本块，但是由于innerHTML的工作方式，它没有被执行：

示例模板演示如果使用innerHTML添加JavaScript将无法运行：

<h1><%= title %></h1> <ul> <% for(var i=0; i<supplies.length; i++) { %> <span id="selected"></span><script>console.info('test <%= i %> = <%= supplies[i] %>');</script> <li> <a href='supplies/<%= supplies[i] %>'> <%= supplies[i] %> </a> </li> <% } %> </ul>

呈现HTML：

如下所示，console.log语句出现在HTML中。但是，使用innerHTML添加时，它们不会触发。

使用视图技术的方法是将它们的使用限制在那里，渲染视图。将您的逻辑保留在“常规JavaScript”中。

<h1>Cleaning Supplies</h1> <ul> <span id="selected"></span><script>console.info('test 0 = Brrom');</script> <li> <a href='supplies/Brrom'> Brrom </a> </li> <span id="selected"></span><script>console.info('test 1 = mop');</script> <li> <a href='supplies/mop'> mop </a> </li> <span id="selected"></span><script>console.info('test 2 = Hammer');</script> <li> <a href='supplies/Hammer'> Hammer </a> </li> </ul>

可以在Google Code Embedded JavaScript网站上的EJS模板上找到更多示例和文档。

在＆lt;％tags内交织EJS和Javascript变量

1 个答案:

的解决方案：

为什么模板中的JavaScript无法运行：