我可以将JavaScript变量传递到模板中吗?:
可能会有更多的数据进入模板并重新呈现它,但不是您想象的方式,并且不需要向服务器发出另一个请求(除非是为了获取更多数据而不是获取更多HTML)。
解决方案:
没有更多细节的情况下回答这个问题可能会很困难,因此我将对您希望将选定的值传递到EJS模板中的原因做出一些假设。 我将尽力以有限的信息回答这个问题。
看起来您的用户正在页面上执行某些操作,例如选择清洁用品,您希望根据用户选择的元素以不同的方式呈现数据。 为此,您可以重新呈现模板并传递标识哪个元素已被选中的数据,使用视图助手将特定类应用于所选元素:
这是修改后的cleaning.ejs模板,使用视图助手添加类:
cleaning.ejs:
<script>
</script>
<h1><%= title %></h1>
<ul>
<% for(var i=0; i<supplies.length; i++) %>
</ul>
呈现的HTML如下:
<script>
/** NOTE: Script blocks will not fire in rendered templates. They are ignored
</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代码呈现的:
data = {
"title":"Cleaning Supplies",
"supplies":[
{
"value":"Broom",
"selected":""
},
{
"value":"mop",
"selected":"selected"
},
{
"value":"Hammer",
"selected":""
}
]
};
var html = new EJS({url: 'cleaning.ejs'}).render(data);
document.getElementById("container").innerHTML = html;
正如您所看到的,supplies[i].selected将选择的类应用于在数据结构中标记为选定的元素。我修改了href值,使其访问第i个数组项中的对象,而不是数组本身的值。
现在,当选择的项被修改时,我们只需修改数据变量,重新呈现EJS模板并将其添加到DOM中。
使用此CSS代码放置在HTML文档的头部,您将看到类似于以下显示的内容:
<style>
.selected { color:red; }
</style>
![选定元素的演示,以红色显示](https://istack.dev59.com/gNY2i.webp)
为什么模板中的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++) %>
</ul>
渲染的HTML:
如下所示,控制台日志语句出现在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>
关于EJS模板的更多示例和文档可以在Google Code Embedded JavaScript网站上找到。