Thymeleaf 教程

自然 JavaScript 和 CSS 模板

正如在上一章中所看到的,JavaScript 和 CSS 内联提供了在 JavaScript / CSS 注释中包含内联表达式的可能性,

比如。

...
var username = /*[[${session.user.name}]]*/ "Sebastian Lychee";
...

…这是有效的 JavaScript,一旦执行,可能会如下所示:

...
var username = "John Apricot";
...

实际上,将内联表达式封装在注释中的相同技巧可以用于整个文本模式语法:

/*[# th:if="${user.admin}"]*/
     alert('Welcome admin');
/*[/]*/

当模板静态打开时(因为它是100%有效的 JavaScript),以及当用户是管理员时运行模板时,将显示上述代码中的警告弹框。相当于:

[# th:if="${user.admin}"]
     alert('Welcome admin');
[/]

…这实际上是在模板解析期间将初始版本转换为的代码。

但是请注意,在注释中包裹元素不会像内联输出表达式那样清理它们所在的行(向右直到找到一个分号 “;”),这种行为只保留给内联输出表达式。

因此,Thymeleaf 3.0 允许以自然模板的形式开发复杂的 JavaScript 脚本和 CSS 样式表,无论是作为原型还是作为工作模板都有效。

说说我的看法
全部评论(
没有评论
关于
本网站专注于 Java、数据库(MySQL、Oracle)、Linux、软件架构及大数据等多领域技术知识分享。涵盖丰富的原创与精选技术文章,助力技术传播与交流。无论是技术新手渴望入门,还是资深开发者寻求进阶,这里都能为您提供深度见解与实用经验,让复杂编码变得轻松易懂,携手共赴技术提升新高度。如有侵权,请来信告知:hxstrive@outlook.com
公众号