内联表达式

th:inline="none" 禁用内联

内联 JavaScript

JavaScript ⾃然模版

⾼级内联表达式JS序列化

内联 CSS

内联表达式

虽然通过 Thymeleaf 标准⽅⾔中的标签属性已经⼏乎满⾜了开发中的所有需求，但是有些情况下更喜欢将表达式直接写⼊到 HTML ⽂本中：

例如有时候这样更合适：<p>Hello, [[${session.user.name}]]</p>
⽽不喜欢这样写代码：<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>

[[...]] 或 [(...)] 中的表达式就是 Thymeleaf 中内联表达式，任何在 th:text 或 th:utext 属性中使⽤的表达式都可以出现在 [[]] 或 [()] 中使用， [[...]] 等价于 th:text（结果将被 HTML 转义），[(...)] 等价于 th:utext（结果不会执⾏HTML转义）。

<body>
<!--后台传出：model.addAttribute("info", "Love you <b>中国</b>");-->
<!--/*前者会转义，后者不会转义*/-->
<p>[[${info}]]</p>
<p>[(${info})]</p><!--/*可以是任意的数据类型，如普通的文本，与 th:text、th:utext完全等价*/-->
<p>[[Love]]</p>
<p>[['I Love You Baby']]</p>
<p>[(9527)]</p>
</body>

提示：当静态打开 HTML ⽂件时，内嵌的表达式将逐字显示在 HTML ⽂件中，因此⽆法将其⽤作设计原型了！比如 “<p>[[${info}]]</p>” 如果是以静态原型打开，那么显示的就是 <p>[[${info}]]</p>。

th:inline="none" 禁用内联

内联机制可以被禁⽤，因为在实际应⽤中可能会想输出 [[...]] 或 [(...)] 序列⽽不将其内容作为表达式处理的情况。为此将使⽤
th:inline =“none” 来禁⽤内联。

<body>
<!--/*禁用内联表达式*/-->
<p th:inline="none">[[${info}]]</p>
<p th:inline="none">[(${info})]</p><!--/*禁用内联表达式*/-->
<p th:inline="none">[[Love]]</p>
<p th:inline="none">[['I Love You Baby']]</p>
<p th:inline="none">[(9527)]</p>
<p th:inline="none">[[1,2,3,4,5]]</p>
</body>

内联 JavaScript

JavaScript 内联允许在 HTML 模板模式中更好地集成 JavaScript <script>块。与⽂本内联⼀样，这实际上等同于处理脚本内容，就像它们是JavaScript 模板模式中的模板⼀样，因此⽂本模板模式的所有功能都可以在内联脚本中使⽤。
必须使⽤ th:inline ="javascript" 显式的启⽤此 JavaScript 模板模式：

<head lang="en"><meta charset="UTF-8"><title>用户首页</title><link type="text/css" rel="stylesheet" th:href="@{/css/userHome.css}"><script type="text/javascript" th:inline="javascript">/*** 后台输出：* model.addAttribute("info", "Love you <b>中国</b>");* model.addAttribute("age", 35);//注意：使用 [(${info})] 时编译报错，浏览器运行也会报错* model.addAttribute("id", null);* model.addAttribute("name", "");* @type {*[]}*/var info = [[${info}]];var age = [[${age}]];var id = [[${id}]];var name = [[${name}]];console.log(id, name, age, info);</script>
</head>

特别提示：th:inline ="javascript" 显式启⽤ JavaScript 模板模式只能是在 Html 文件内部的 JavaScript 代码，如上所示。不能在引入的外部 JavaScript 文件中进行操作，如：

<script type="text/javascript" th:inline="javascript" th:src="@{/js/userHome.js}"></script>
//如果在这个外置的 userHome.js 中进行内联表达式操作，则 Thymeleaf 无法解析，浏览器识别不了而报错。

JavaScript ⾃然模版

Thymeleaf 的目标就是希望前后端分离，即同一个 Html 文件前端人员以静态原型的方式打开时，看到的是它们的内容，而后端人员通过服务器打开时，看到的是动态的数据。内联的 JavaScript 同样可以实现这一点。在 JavaScript 注释中包含（转义）内联表达式即可满足此需求。

    <script type="text/javascript" th:inline="javascript">/*** 后台输出：model.addAttribute("info", "Love you <b>中国</b>");* Thymeleaf 将自动忽略掉注释之后 和 分号之前的所有内容,如下为 "前端测试"*/var info = /*[[${info}]]*/ "前端测试";console.log(info);</script>

这种在前后端都可以运行的 JavaScript 脚本称为 JavaScript ⾃然模板！

⾼级内联表达式JS序列化

关于 JavaScript 内联的⼀个重要的特性是，内联表达式的计算结果不限于字符串，它能⾃动的将以下对象序列化为 javascript 对象。 Thymeleaf ⽀持以下⼏种序列化对象：

1）Strings
2）Numbers
3）Booleans
4）Arrays
5）Collections
6）Maps
7）Beans (有getter _and _setter⽅法)

Thymeleaf 对 JavaScript 序列化的⽅式是通过 org.thymeleaf.standard.serializer.IStandardJavaScriptSerializer 接⼝的实
现，可以在模板引擎的 StandardDialect 的实例中进⾏配置。

该 JavaScript 序列化机制默认将在类路径中查找 Jackson 库，如果存在，将使⽤它。如果没有，它将应⽤⼀个内置的序列化机制，内置的序列化机制涵盖⼤多数场景的需求，并和 Jackson 序列化机制产⽣类似的结果。

这里以后台控制器传出一个 List<User> 对象为例进行说明，其它都是同理，User 是 Java Beab，提供了 getter、setter 方法。

    <script type="text/javascript" th:inline="javascript">/*** 后台输出：model.addAttribute("userList", userList);* userList 是一个 List<User> 的结构，其中有5个元素*/var userList = [[${userList}]];/**已经被 Thymeleaf 序列化为 JS 对象，是一个数组加Object 的个数，即数组中有5个Object*/console.log("userList", userList);for (let i = 0; i < userList.length; i++) {/**取值打印*/console.log(i, userList[i], userList[i].uName);}</script>

内联 CSS

Thymeleaf 还允许在 CSS <style> 标签中使⽤内联，如：

<style th:inline="css">
...
</style>

<head lang="en"><meta charset="UTF-8"><title>用户首页</title><link type="text/css" rel="stylesheet" th:href="@{/css/userHome.css}"><!--/*为了测试简单，直接使用 th:with 定义两个局部变量；也可以后台传输来的*/--><style type="text/css" th:inline="css" th:with="h4Color='yellow',fontSize='25px'">p {color: [[${h4Color}]];font-size: [(${fontSize}) ];}</style>
</head>

注意事项：

1）获取变量赋值时，fontSizt 需要使用 [(...)] 不进行转义，如果是 [[...]] 转义则会多出来一个斜杠而导致无效。

2）与内联 JavaScript ⼀样，CSS 内联也允许 <style> 标签可以静态和动态地⼯作，即通过在注释中包含内联表达式作为CSS ⾃然模板。

<style type="text/css" th:inline="css" th:with="h4Color='yellow',fontSize='25px'">p {color: /*[[${h4Color}]]*/ red;font-size: [(${fontSize})];}
</style>

3）如上所示当服务器动态打开时，字体颜色为黄色；当以原型静态打开时，显示的是红色，因为 Thymeleaf 会自动忽略掉 css 注释之后和分号之前的代码。

4）因为 CSS 自然模板的问题，所以不能在 css 中像以前一样添加注释，因为 Thymeleaf 会将它们当做模板进行处理。

5）与内联 JavaScript 一样，内联 CSS 同样只能 Html 内嵌的 <style 标签中进行使用，不能在外部关联的 CSS 文件中进行使用。

<link type="text/css" rel="stylesheet" th:href="@{/css/userHome.css}" th:inline="css">
//这是错误的，不能在 userHome.css 文件中使用内联 CSS。

7）Thymeleaf 内联表达式、文本、JavaScript、CSS相关推荐

C#开发学习——内联表达式
<%@ 表示:引用 <%# 表示:绑定 <%= 表示:取值 <%= 变量名%> Response.Write()输出和<%=%>输出最后的效果是一样的 < ...
html 中内联样式表,html – CSS带有内联样式的伪类
不,这是不可能的.在使用CSS的文档中,内联样式属性只能包含属性声明;在样式表中的每个规则集中出现的同一组语句.从 Style Attributes spec: The value of the st ...
thymeleaf中的内联[ [ ] ]
一.文本内联 [[-]]之间的表达式在Thymeleaf被认为是内联表达式,在其中您可以使用任何类型的表达式,也会有效th:text属性. <p>Hello, [[${session.us ...
JavaScript基础13-day15【DOM增删改、DOM添加删除记录、操作内联样式、获取元素的样式、DOM Element 对象、滚动条练习、事件对象、div跟随鼠标移动、事件冒泡】
学习地址: 谷粒学院--尚硅谷哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...
css内联样式_如何覆盖内联CSS样式
css内联样式本文写于2009年,至今仍是我们最受欢迎的帖子之一. 如果您想了解有关CSS的更多信息,您可能会发现这篇有关CSS技术的文章对视网膜显示非常感兴趣. CSS的最强大功能之一就是层叠. ...
android html转pdf工具,android – 使用iText库将html转换为pdf时未应用hr的内联CSS
我是.NET开发人员,因此代码在C#中.但是你应该能够轻松翻译以下内容. iText是一个PDF优先的库,[X] HTML解析非常复杂,因此在这方面并不完整.每当解析[X] HTML并且事情不按预期的 ...
一张图图片分块html,css img图片是内联还是块？
img图片是一个内联元素,默认CSS display属性的值是inline.但是他同时也是replace元素,他有着特殊的表现: 1.可以设置width/height; 2.默认的,img元素在屏幕占 ...
Thymeleaf——使用模板动态生成JavaScript脚本文件
官方文档 JavaScript和CSS模板:https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#natural-javasc ...
[JAVA EE] 内联用法
(1)内联表达式有些情况下更喜欢将表达式直接写入到 HTML 文本中. 内联表达式:<p>Hello, [[${stu.name}]]</p> 或者这样写:<p> ...
DOM与元素节点内联样式
获取.设置及移除单个内联 CSS 属性每个 HTML 元素都有个 style 属性,可以用来插入针对该元素的内联 CSS 属性. <div style='background-color:bl ...

7）Thymeleaf 内联表达式、文本、JavaScript、CSS

内联表达式

th:inline="none" 禁用内联

内联 JavaScript

JavaScript ⾃然模版

⾼级内联表达式JS序列化

内联 CSS

7）Thymeleaf 内联表达式、文本、JavaScript、CSS相关推荐

最新文章

热门文章