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