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 。我可以将 Javascript 变量转换为 EJS 变量, 向我的 Norde.js 服务器实例发送信息, 但是这有点傻... 在 EJS 中是否有方法使用 Javascript 变量?

EDIT: I want to access supplies, a javascript array, after the user selected an item from a drop down menu. When he selects this item, a javascript function with the above code needs to access some EJS. That s why I need to use a normal Javascript variable in EJS.

Answer 1

<% 1> 我能将 JavaScript 变量传送到模板吗? :

可以将更多的数据输入模板并重新发送,但不能按照你重新思考的方式,并且不向服务器提出另一项请求(除非是为了获得更多的数据,而不是获得更多的HTML)。

Solution:

如果没有更多细节,这个问题将很难回答,所以我将对“为什么”做一些假设,以便你把一个选定的值传送到 EJS 模板中。我会尽力用有限的关于你目标的信息回答这个问题。

您的用户似乎正在页面上执行一些动作, 比如选择一个清洁供应, 您想要根据选择的用户的元素, 使数据不同化。为此, 您可以重新复制模板, 并传递识别选定元素的数据, 使用查看助手对选中元素应用特定类别 :

以下是经过修改的清洁模板: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>
            <!-- apply a class to the selected element -->
            <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>
            <!-- Note the selected element -->
            <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;

如您所看到的, subjects[i]. sected 将选定类别应用到数据结构中标记的元素上。我修改了 href 值, 以便它访问 Ish 数组项中的对象, 而不是数组本身的值。

现在,当选中的项目被修改时, 我们只需修改数据变量, 重新生成 EJS 模板, 并将其添加到 DOM 中。

在您的 HTML 文档头部有这个 CSS, 你会看到类似下面显示的东西 :

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

"https://i.sstatic.net/gNY2i.png" alt="选定红元素的演示"/ >

Why JavaScript in the template doesn t run:

试图在 EJS 模板中操作 JavaScript 值或使用 JavaScript 值的方法不会起作用。这主要与执行 JavaScript 时 < em> 的背景有关。

您有理由认为 EJS 模板是在客户端编译的。然而, 查看中的 JavaScript 帮助者在全球背景中独立于 JavaScript 。从 ejs.js 源代码看, 似乎在此过程中使用了 eval 。

此外, EJS 将完成的 HTML 返回为字符串, EJS 的文档指示我们用内部HTML 向 DOM 输入模板字符串 :

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

无论您使用的是什么样的视图技术,对于 JavaScript 来说,某些浏览器的基本真理之一是: < 坚固> 一些浏览器可能无法评估使用内部HTML 添加到 DOM 的 < code\ lt; static> 块

换句话说,在我的测试模板中, 当我试图添加一个脚本标记来输出控制台的选定值时, 我可以看到脚本块被添加了, 但是由于内部HTML的工作方式, 它没有被执行 :

使用内部HTML 添加的 < 强度 > 示例模板演示器 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:

如下文所示,主控台.log 语句出现在 HTML 中。但是,当使用内部HTML 添加时,它们不会开火。

查看技术要采用的方法是将技术的使用限制在仅此而已, 形成观点。将您的逻辑保留在“ 常规 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 嵌入的JavaScript 网站的EJS模板上可以找到更多实例和文件。

Solution:

Why JavaScript in the template doesn t run:

友情链接