首页 > 编程笔记 > Java笔记 阅读：1

Thymeleaf th:inline内联用法详解（附带实例）

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

Thymeleaf文本内联

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

文本内联比 th:text 的代码更简洁。下面通过示例演示内联的使用方式。
1) 首先，创建页面 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>
通过以上两个示例可以看出使用内联语法会更简洁一些：
2) 然后，创建后台路由 /inline，示例代码如下： 
@RequestMapping("/inline")
public String inline(ModelMap map) {
    map.addAttribute("userName", "admin");
    return "inline";
}
在上面的示例中，后台返回 inline.html 页面，同时返回 userName=admin。

3) 最后，运行测试。启动项目后，在浏览器中输入地址 http://localhost:8080/inline，则会出现如下图所示的结果。


图 1 文本内联inline.html页面显示效果

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

Thymeleaf脚本内联

脚本内联，顾名思义就是在 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，会出现如下图所示的结果。


图 2 脚本内联inline.html页面显示效果

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

Thymeleaf样式内联

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

1) 首先，修改 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 需要使用 [(...)] 表示不进行转义，如果使用 [[...]] 进行了转义，则会导致样式无效。

2) 然后，修改 /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。

3) 最后启动项目，在浏览器中输入地址 http://localhost:8080/inline，可以看到如下图所示的结果。


图 3 样式内联 inline.html 页面显示效果

页面显示的字体大小和颜色根据后台返回的数据显示，说明 CSS 内联生效。

Thymeleaf禁用内联

Thymeleaf 支持使用 th:inline =“none”来禁止使用内联。示例代码如下： 
<body>
<!--/*禁用内联表达式*/-->
<p th:inline="none">[[${info}]]</p>
<!--/*禁用内联表达式*/-->
<p th:inline="none">[[Info]]</p>
</body>

相关文章