赵走x博客 - 开发者的网上家园

21、Thymeleaf内联

资源编号:551812 热度：104

21、Thymeleaf内联

上一节介绍了Thymeleaf的基本使用语法，包括常用的赋值、字符串拼接、条件判断、数据循环遍历等语法。

接下来介绍Thymeleaf的内联、内置对象、内置变量等高级用法，让我们在实践中边学边用，从而更好地理解和吸收。

# 一、内联

虽然通过Thymeleaf中的标签属性已经几乎满足了开发中的所有需求，但是有些情况下需要在CSS或JS中访问后台返回的数据。所以Thymeleaf提供了`th:inline="text/javascript/none"`标签，使用`[[…]]`内联表达式的方式在HTML、JavaScript、CSS代码块中轻松访问model对象数据。

### 1. 文本内联
Thymeleaf内联表达式使用[[...]]或[(...)]语法表达。先在父级标签定义使用内联方式`th:inline="text"`，然后在标签内使用[[…]]或[(...)]表达式操作数据对象。

文本内联比`th:text`的代码更简洁。

下面通过示例演示内联的使用方式。

首先，创建页面inline.html。示例代码如下：

```
<h1>Thymeleaf模板引擎</h1>
<div>
    <h1>内联</h1>
    <div th:inline="text" >
        <p>Hello, [[${userName}]] !</p>
        <br/>
    </div>
</div>
```

以上代码等价于：

```
<div>
    <h1>不使用内联</h1>
    <p th:text="'Hello, ' + ${userName} + ' !'"></p>
    <br/>
</div>
```

通过以上两个示例可以看出使用内联语法会更简洁一些。
1）`th:inline="text"`表示使用文本内联方式。
2）任何父标签都可以加上`th:inline`。
3）[[...]] 等价于`th:text`结果将被HTML转义，[(...)]等价于`th:utext`结果不会被HTML转义。

然后，创建后台路由/inline，示例代码如下：

```
@RequestMapping("/inline")
public String inline(ModelMap map) {
    map.addAttribute("userName", "admin");
    return "inline";
}
```

在上面的示例中，后台返回inline.html页面，同时返回userName=admin。

最后，运行测试。

启动项目后，在浏览器中输入地址http://localhost:8080/inline ，则会出现如图5-7所示的结果。

![](http://oldmark.oss-cn-beijing.aliyuncs.com/2023/10/19/efdefc32-6e21-11ee-bb4d-0242ac1b0002/983ccdc7bd324b609631e858cbebd3d5.png)

页面显示后台返回的userName为admin，比之前介绍的`th:text=${userName}`的方式更加简单、清晰。
### 2. 脚本内联

脚本内联，顾名思义就是在JavaScript脚本中使用内联表达式。

使用时只需要在<script>标签上加入`th:inline="javascript"`属性，然后在JavaScript代码块中就能使用[[]]表达式。

实现在JavaScript脚本中获取后台传过来的参数。

首先，修改inline.html页面，增加如下脚本：

```
<script th:inline="javascript">
    var name ='hello,'+ [[${userName}]] ;
    alert(name);
</script>
```

在上面的示例中，在<script>标签内加入`th:inline="javascript"`，表示能在JavaScript中使用[ [] ]取值。在访问页面时，根据后端传值拼接name值，并以alert的方式弹框展示。

然后启动项目，在浏览器中输入地址http://localhost:8080/inline ，会出现如图5-8所示的结果。

![](http://oldmark.oss-cn-beijing.aliyuncs.com/2023/10/19/24f57248-6e22-11ee-b1ed-0242ac1b0002/5936056a128947e3b1e23dbd789504d9.png)

显示页面会先弹出一个alert提示框，显示“hello admin”，说明使用脚本内联绑定了后台传过来的数据。

### 3. 样式内联

Thymeleaf还允许在<style>标签中使用内联表达式动态生成CSS属性样式。

下面通过示例演示内联CSS样式的用法。'

首先，修改inline.html页面，加入如下样式：

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

在上面的示例中，与内联JavaScript一样，CSS内联也允许<style>标签静态和动态区分处理，当服务器动态打开时，字体颜色为黄色；当以原型静态打开时，显示的是红色，因为Thymeleaf会自动忽略掉CSS注释之后和分号之前的代码。

需要注意的是，在获取变量赋值时，fontSize需要使用[(...)]表示不进行转义，如果使用[[...]]进行了转义，则会导致样式无效。

然后，修改/inline路由，返回fontSize和color，示例代码如下：

```
@RequestMapping("/inline")
public String inline(ModelMap map) {
    map.addAttribute("fontSize", "20px");
    map.addAttribute("color", "yellow");
    map.addAttribute("userName", "admin");

return "inline";
}
```

在上面的示例中，增加了fontSize和color两个CSS的属性样式，设置fontSize为20px，color为yellow。然后启动项目，在浏览器中输入地址http://localhost:8080/inline ，可以看到如图5-9所示的结果。

![](http://oldmark.oss-cn-beijing.aliyuncs.com/2023/10/19/64b8d3a2-6e22-11ee-8a31-0242ac1b0002/8a75d4f8c28f4a239860df5037adcd51.png)
页面显示的字体大小和颜色根据后台返回的数据显示，说明CSS内联生效。

### 4. 禁用内联

Thymeleaf支持使用`th:inline =“none”`来禁止使用内联。

示例代码如下：

```
<body>

<p th:inline="none">[[${info}]]</p>

<p th:inline="none">[[Info]]</p>
</body
```