Thymeleaf——使⽤模板动态⽣成JavaScript脚本⽂件
官⽅⽂档
解决⽅案
Thymeleaf 3.0允许以⼀般模板的形式开发复杂的JavaScript脚本和CSS样式表,这些模板既可以作为原型也可以作为⼯作模板使⽤。
JAVASCRIPT模板模式下的另⼀个⽰例(greeter.js⽂件)将作为⽂本模板进⾏处理,然后从HTML页⾯调⽤该结果。请注意,这不是<script> HTML模板中的块,⽽是.js单独作为模板处理的⽂件:
var greeter = function() {
var username = [[${session.user.name}]];
[# th:each="salut : ${salutations}"]
alert([[${salut}]] + " " + username);
[/]
};
执⾏后,其结果可能类似于:
var greeter = function() {
var username = "Bertrand \"Crunchy\" Pear";
alert("Hello" + " " + username);
alert("Ol\u00E1" + " " + username);
alert("Hola" + " " + username);
};
JavaScript和CSS内联提供了将内联表达式包含在JavaScript / CSS注释中的可能性,例如:
<span ><code class="language-javascript">...
var username = /*[[${session.user.name}]]*/ "Sebastian Lychee";
.
..</code></span>
这是有效的JavaScript,执⾏后的外观如下:
<span ><code class="language-html">...
var username = "John Apricot";
...</code></span>
实际上,可以将这种将内联表达式包含在注释中的相同技巧可⽤于整个⽂本模式语法:
/*[# th:if="${user.admin}"]*/
alert('Welcome admin');
/*[/]*/
js脚本开发如果模板是静态打开的(因为它是100%有效的JavaScript),并且如果⽤户是管理员运⾏模板,则将在上⾯的代码中显⽰该警报。它等效于:
[# th:if="${user.admin}"]
alert('Welcome admin');
[/]
实际上是模板解析期间将初始版本转换为的代码。
但是请注意,在注释中包装元素并不会;像内联输出表达式那样清除它们所在的⾏(直到到a为⽌,⼀直在右边)。该⾏为仅保留给内联输出表达式。
参考⽂章
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论