1、设置属性值
1.1、th:attr 能够更改其设置的标签的属性值
<form action="subscribe.html" th:attr="action=@{/subscribe}">
<fieldset>
<input type="text" name="email" />
<input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>
</fieldset>
</form>
设置多个属性时,需要使用逗号进行分隔
<img src="../../images/gtvglogo.png"
th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />
1.2、为特定属性赋值
到现在为止,你可能会使用下面方式为value属性进行赋值:
<input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>
然而使用这种方式是一个相当丑陋的标记。在属性值中指定赋值可能非常实用,但如果您必须一直这样做,这并不是创建模板的最优雅方式。
Thymeleaf 不推荐使用,这就是为什么th:attr
很少在模板中使用。通常,您将使用其他th:*
属性,其任务是设置特定标签属性(而不仅仅是任何属性,如th:attr
)。
例如,要设置value
属性,请使用th:value
:
<input type="submit" value="Subscribe!" th:value="#{subscribe.submit}"/>
有很多这样的属性,每个属性都针对特定的 HTML5 属性:(包含了所有属性)
1.3、一次设置多个值
有两个相当特殊的属性被称为th:alt-title
,th:lang-xmllang
可用于同时将两个属性设置为相同的值。具体来说:
th:alt-title
将设置alt
和title
。th:lang-xmllang
将设置lang
和xml:lang
。
<img src="../../images/gtvglogo.png"
th:src="@{/images/gtvglogo.png}" th:title="#{logo}" th:alt="#{logo}" />
这个可以使用标签进行替换
<img src="../../images/gtvglogo.png"
th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}" />
1.4、追加和前置
Thymeleaf 还提供th:attrappend
和
th:attrprepend
属性,它们将评估结果附加(后缀)或前置(前缀)到现有属性值。
例如,您可能希望将要添加(未设置,只是添加)到上下文变量中的一个按钮的 CSS 类的名称存储,因为要使用的特定 CSS 类将取决于用户所做的事情前:
<input type="button" value="Do it!" class="btn" th:attrappend="class=${' ' + cssStyle}" />
标准方言中还有两个特定的附加属性th:classappend
和th:styleappend
属性,用于向元素添加 CSS 类或样式片段,而不覆盖现有的:
<tr th:each="prod : ${prods}" class="row" th:classappend="${prodStat.odd}? 'odd'">
1.5、固定值布尔属性
HTML 具有布尔属性的概念,即没有值的属性,并且存在一个,意味着值是“真”。在 XHTML 中,这些属性只取 1 个值,即它本身。
例如checked
:
<input type="checkbox" name="option2" checked /> <!-- HTML -->
<input type="checkbox" name="option1" checked="checked" /> <!-- XHTML -->
标准方言包括允许您通过评估条件来设置这些属性的属性,因此如果评估为 true,则该属性将设置为其固定值,如果评估为 false,则不会设置该属性:
<input type="checkbox" name="active" th:checked="${user.active}" />
标准方言中存在以下固定值布尔属性:
th:async | th:autofocus | th:autoplay |
th:checked | th:controls | th:declare |
th:default | th:defer | th:disabled |
th:formnovalidate | th:hidden | th:ismap |
th:loop | th:multiple | th:novalidate |
th:nowrap | th:open | th:pubdate |
th:readonly | th:required | th:reversed |
th:scoped | th:seamless | th:selected |
1.6、设置任意属性的值
Thymeleaf 提供了一个默认的属性处理器,它允许我们设置任何属性的值,即使th:*
在标准方言中没有为它定义特定的处理器。
所以像:
<span th:whatever="${user.name}">...</span>
将导致:
<span whatever="John Apricot">...</span>
1.7、支持 HTML5 友好的属性和元素名称
也可以使用完全不同的语法以对 HTML5 更友好的方式将处理器应用于您的模板。
<table>
<tr data-th-each="user : ${users}">
<td data-th-text="${user.login}">...</td>
<td data-th-text="${user.name}">...</td>
</tr>
</table>
该data-{prefix}-{name}
语法是在 HTML5 中编写自定义属性的标准方式,无需开发人员使用任何命名空间名称,例如th:*
. Thymeleaf 使这种语法自动适用于所有方言(不仅是标准方言)。
还有一种语法来指定自定义标签:{prefix}-{name}
,它遵循W3C 自定义元素规范(更大的W3C Web 组件规范的一部分)。例如,这可以用于th:block
元素(或也th-block
),这将在后面的部分中解释。
重要提示:此语法是对命名空间语法的补充th:*
,它不会取代它。将来根本不打算弃用命名空间语法。
2、迭代
2.1、th:each
<tr th:each="prod : ${prods}">
<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>
你在上面看到的那个prod : ${prods}
属性值意味着“对于评估结果中的每个元素${prods}
,重复这个模板片段,使用名为 prod 的变量中的当前元素”。让我们为我们看到的每一个事物命名:
${prods}
我们将调用迭代表达式或迭代变量。- 我们将调用迭代变量或简称
prod
为迭代变量。
请注意,prod
iter 变量的作用域是<tr>
元素,这意味着它可用于内部标签,如<td>
可迭代值
该类java.util.List
并不是 Thymeleaf 中唯一可用于迭代的值。有一组非常完整的对象被属性认为是可迭代的:th:each
- 任何实现的对象
java.util.Iterable
- 任何实现
java.util.Enumeration
. - 任何实现 的对象
java.util.Iterator
,其值将在迭代器返回时使用,而无需将所有值缓存在内存中。 - 任何实现
java.util.Map
. 迭代映射时,迭代变量将属于 classjava.util.Map.Entry
。 - 任何数组。
- 任何其他对象都将被视为包含对象本身的单值列表。
2.2、保持迭代状态
使用 时th:each
,Thymeleaf 提供了一种用于跟踪迭代状态的机制:状态变量。
状态变量在th:each
属性中定义并包含以下数据:
- 当前迭代索引,从 0 开始。这是
index
属性。 - 当前迭代索引,从 1 开始。这是
count
属性。 - 迭代变量中的元素总数。这是
size
属性。 - 每次迭代的iter 变量。这是
current
属性。 - 当前迭代是偶数还是奇数。这些是
even/odd
布尔属性。 - 当前迭代是否是第一个。这是
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>
状态变量(iterStat
在此示例中)th:each
通过在 iter 变量本身之后写入其名称来在属性中定义,用逗号分隔。就像 iter 变量一样,status 变量的作用域也是由包含该th:each
属性的标记定义的代码片段。
注意:如果您没有明确设置状态变量,Thymeleaf 将始终通过Stat
为迭代变量的名称添加后缀来为您创建一个。
<table>
<tr>
<th>NAME</th>
<th>PRICE</th>
<th>IN STOCK</th>
</tr>
<tr th:each="prod : ${prods}" th:class="${prodStat.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>
3、条件评估
3.1、简单条件语句:'if'和'unless'
有时,您需要模板的片段仅在满足特定条件时才出现在结果中。
例如,假设我们想在我们的产品表中显示一个列,其中包含每个产品存在的评论数量,如果有任何评论,则显示该产品的评论详细信息页面的链接。
为此,我们将使用以下th:if
属性:
<table>
<tr>
<th>NAME</th>
<th>PRICE</th>
<th>IN STOCK</th>
<th>COMMENTS</th>
</tr>
<tr th:each="prod : ${prods}" th:class="${prodStat.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>
<td>
<span th:text="${#lists.size(prod.comments)}">2</span> comment/s
<a href="comments.html"
th:href="@{/product/comments(prodId=${prod.id})}"
th:if="${not #lists.isEmpty(prod.comments)}">view</a>
</td>
</tr>
</table>
这里有很多东西要看,所以让我们关注重要的一行:
<a href="comments.html"
th:href="@{/product/comments(prodId=${prod.id})}"
th:if="${not #lists.isEmpty(prod.comments)}">view</a>
注意:该th:if
属性不仅会评估布尔条件,下面表达式会默认的布尔值为true:
- 如果值不为空:
- 如果 value 是一个布尔值并且是
true
. - 如果 value 是一个数字并且非零
- 如果 value 是一个字符并且非零
- 如果 value 是 字符串 并且不是“false”、“off”或“no”
- 如果 value 不是布尔值、数字、字符或字符串。
- 如果 value 是一个布尔值并且是
- (如果 value 为 null,th:if 将评估为 false)。
th:if有一个与之相反的逆属性th:unless,这个属性等同于if判断的结果加上not,如上面的if表达式
<a href="comments.html"
th:href="@{/comments(prodId=${prod.id})}"
th:unless="${#lists.isEmpty(prod.comments)}">view</a>
3.2、切换语句
thymeleaf中支持switch语句类似于Java中的switch语句,这个属性为:th:switch
/ th:case
<div th:switch="${user.role}">
<p th:case="'admin'">User is an administrator</p>
<p th:case="#{roles.manager}">User is a manager</p>
</div>
注意:一旦th:case被评估为true,其它th:case在这个switch上下文中被评估为false
默认选项指定为th:case="*"
<div th:switch="${user.role}">
<p th:case="'admin'">User is an administrator</p>
<p th:case="#{roles.manager}">User is a manager</p>
<p th:case="*">User is some other thing</p>
</div>