thymeleaf学习
- URL:@{}
<a th:href="@{/order/{orderId}/details(orderId=${o.id})}">view</a>
<!--就可转化为href="/order/3/details"-->
- 常量替换
无需通过'...'+'...'
只需要将包含变量的字符串用|保围
<span th:text="|welcome to our application,${user.userName}|"></span>
- 算术操作符
+-*/这些运算符也支持 不过不同的书写方式决定由thymeleaf还是OGNL来解析
<div th:with="isEven=(${prodState.count} %2 ==0)"> </div>
<div th:with="isEven=${prodState.count %2 ==0}"> </div>
- 不执行操作标识_
<span th:text="${user.name}?:_">no user autheticated</span>
- 数据转化
${{}}将数据渲染至模板之前通过配置的服务格式化
- 首尾属性添加th:attrappend th:attrprepend
<input type="text" name="" class="btn" th:attrappend="class =${' '+cssStyle}">
- 迭代th:each
当使用th:each迭代的时候，Thymeleaf 提供了一个机制用于跟踪迭代的状态：状态变量
包含：
index:当前迭代的下标从0开始
count:当前迭代的下标从一开始
size:可迭代变量的总数量
current:每次迭代的单个迭代变量
even/odd:当前迭代的序号是奇数还是偶数
first/last:布尔属性是否为first或者是last
使用示例
<table>
<tr>
<th>NAME</th>
<th>PRICE</th>
<th>IN STOCK</th>
</tr>
<tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
<td th:text="${prod.name}">Onions</td>
<td th:text="${prod.price}">2.41</td>
<td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
</tr>
</table>
- if 和unless
有时候需要模板中的一段代码在满足一定条件后才显示
<a th:href="@{/product/comments(productId=${prod.id})}"
th:if="${ not #list.isEmpty(prod.comments)}"
>view</a>
- swich语句
<div th:switch="${user.role}">
<p th:case="'admin'">admin</p>
<p th:case="#{roles.manager}">manager</p>
<p th:case="*">i am gaojl</p>
</div>
- 定义和插入片段
创建footer.html在里面定义一个叫copy的片段
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</div>
</body>
</html>
我们可以在主页上使用th:insert th:replace th:replace
<body>
...
<div th:insert="~{footer :: copy}">
</div>
...
</body>
片段规范语法
"~{templatename::selector}"
其中"~{::selector}" 表示本模板中找到匹配选择器
还可以使用
...
<div id="copy-section">
© 2011 The Good Thymes Virtual Grocery
</div>
...
<body>
...
<div th:insert="~{footer :: #copy-section}"></div>
</body>
th:insert 将片段插入到宿主标签下
th:replace 将宿主标签替换为该片段
th:include 类似th:insert 但只是将该片段的子元素插入
- 为fragment 添加参数
定义：
<div th:fragment="frag (onevar,twovar)">
<p th:text="${onevar} + ' - ' + ${twovar}">...</p>
</div>
使用：
<div th:replace="::frag (${value1},${value2})">...</div>
<div th:replace="::frag (onevar=${value1},twovar=${value2})">...</div>
- 为fragment 添加整个片段
下面为模板：
<head th:fragment="common_header(title,links)">
<title th:replace="${title}">The awesome application</title>
<!-- Common styles and scripts -->
<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
<script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>
<!--/* Per-page placeholder for additional links */-->
<th:block th:replace="${links}" />
</head>
这样调用：
...
<head th:replace="base :: common_header(~{::title},~{::link})">
<title>Awesome - Main</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>
...
结果：
...
<head>
<title>Awesome - Main</title>
<!-- Common styles and scripts -->
<link rel="stylesheet" type="text/css" media="all" href="/awe/css/awesomeapp.css">
<link rel="shortcut icon" href="/awe/images/favicon.ico">
<script type="text/javascript" src="/awe/sh/scripts/codebase.js"></script>
<link rel="stylesheet" href="/awe/css/bootstrap.min.css">
<link rel="stylesheet" href="/awe/themes/smoothness/jquery-ui.css">
</head>
...
- 局部变量
th:with 是定义局部变量的方式
还可以对已经存在的变量重用
<div th:with="company=${user.company + ' Co.'},account=${accounts[company]}">...</div>
- 内联表达式
<p> [[${session.user.name}]]</p>
th:text 和th:utext的区别
th:text可对变量或者表达式求值并将结果显示在其被包含的html标签内
th:utext会将带标签的html富文本转化为html内容
- 高级内联计算和JavaScript序列化
表达式的计算是智能且不局限于字符串thymeleaf会将下列类型的对象正确输出
String Number Boolean Array Collection Map Bean