thymeleaf
遍历
<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>
我们希望该th:each属性在之前执行,th:text以便我们得到我们想要的结果,但考虑到HTML / XML标准没有给标记中的属性编写顺序赋予任何意义,优先级必须在属性本身中建立机制,以确保它将按预期工作。
因此,所有Thymeleaf属性都定义了一个数字优先级,它确定了它们在标记中执行的顺序。这个顺序是:
、
11.4。合成th:block标签
标准方言中包含的Thymeleaf唯一的元素处理器(不是属性)是th:block。
th:block是一个纯粹的属性容器,允许模板开发人员指定他们想要的任何属性。Thymeleaf将执行这些属性,然后简单地使块,但不是它的内容,消失。
因此,在创建每个元素需要多个迭代表时,它可能很有用:
<table>
<th:block th:each="user : ${users}">
<tr>
<td th:text="${user.login}">...</td>
<td th:text="${user.name}">...</td>
</tr>
<tr>
<td colspan="2" th:text="${user.address}">...</td>
</tr>
</th:block>
</table>
当与仅原型注释块结合使用时尤其有用:
<table>
<!--/*/ <th:block th:each="user : ${users}"> /*/-->
<tr>
<td th:text="${user.login}">...</td>
<td th:text="${user.name}">...</td>
</tr>
<tr>
<td colspan="2" th:text="${user.address}">...</td>
</tr>
<!--/*/ </th:block> /*/-->
</table>
注意这个解决方案如何让模板成为有效的HTML(不需要在
12内联
虽然标准方言允许我们使用标记属性来完成几乎所有操作,但在某些情况下我们可能更喜欢将表达式直接编写到HTML文本中。例如,我们可能更喜欢这样写:
<p>Hello, [[${session.user.name}]]!</p>
而不是这个:
<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>
在Thymeleaf 之间表达[[…]]或被[(…)]认为是内联表达式,在其中我们可以使用任何类型的表达式,这些表达式在一个th:text或th:utext属性中也是有效的。
请注意,虽然[[…]]对应于th:text(即结果将被HTML转义),但[(…)]对应于th:utext并且不会执行任何HTML转义。所以对于一个变量,例如msg = ‘This is great!’,给定这个片段:
<p>The message is "[(${msg})]"</p>
禁用内联
<p th:inline="none">A double array looks like this: [[1, 2, 3], [4, 5]]!</p>
这将导致:
<p>A double array looks like this: [[1, 2, 3], [4, 5]]!</p>
12.2文字内联
文本内联与我们刚刚看到的表达内联功能非常相似,但它实际上增加了更多功能。必须明确启用它th:inline=“text”。
文本内联不仅允许我们使用我们刚刚看到的相同内联表达式,而且实际上处理标签主体就好像它们是在TEXT模板模式下处理的模板一样,这允许我们执行基于文本的模板逻辑(不仅仅是输出表达式)。
我们将在下一章中看到有关文本模板模式的更多信息。
12.3 JavaScript内联
JavaScript内联允许
与文本内联一样,这实际上相当于处理脚本内容,就好像它们是JAVASCRIPT模板模式中的模板一样,因此文本模板模式的所有功能(见下一章)都将在眼前。但是,在本节中,我们将重点介绍如何使用它将Thymeleaf表达式的输出添加到JavaScript块中。
必须使用th:inline="javascript"以下方式显式启用此模式:
<script th:inline="javascript">
...
var username = [[${session.user.name}]];
...
</script>
这将导致:
<script th:inline="javascript">
...
var username = "Sebastian \"Fruity\" Applejuice";
...
</script>
以上代码中需要注意的两件重要事项:
首先,JavaScript内联不仅会输出所需的文本,而且还会用引号和JavaScript来包含它 - 转义其内容,以便将表达式结果输出为格式良好的JavaScript文字。
其次,发生这种情况是因为我们将 s e s s i o n . u s e r . n a m e 表 达 式 输 出 为 转 义 , 即 使 用 双 括 号 表 达 式 : [ [ {session.user.name}表达式输出为转义,即使用双括号表达式:[[ session.user.name表达式输出为转义,即使用双括号表达式:[[{session.user.name}]]。如果相反,我们使用非转义,如:
<script th:inline="javascript">
...
var username = [(${session.user.name})];
...
</script>
结果如下:
<script th:inline="javascript">
...
var username = Sebastian "Fruity" Applejuice;
...
</script>
这是一个格式错误的JavaScript代码。但是,如果我们通过附加内联表达式来构建脚本的一部分,那么输出未转义的内容可能就是我们所需要的,因此最好有这个工具
关键字
功能介绍
案例
th:id
替换id
<input th:id="'xxx' + ${collect.id}"/>
th:text
文本替换
<p th:text="${collect.description}">description</p>
th:utext
支持html的文本替换
content
th:object
替换对象
<div th:object="${session.user}">
th:value
属性赋值
<input th:value = "${user.name}" />
```
th:with
变量赋值运算
<div th:with="isEvens = ${prodStat.count}%2 == 0"></div>
th:style
设置样式
<div th:style="'display:' + @{(${sitrue} ? 'none' : 'inline-block')} + ''"></div>
```
th:onclick
点击事件
<td th:onclick = "'getCollect()'"></td>
th:each
属性赋值
<tr th:each = "user,userStat:${users}">
th:if
判断条件
<a th:if = "${userId == collect.userId}">
th:unless
和th:if判断相反
<a th:href="@{/login} th:unless=${session.user != null}">Login</a>
th:href
链接地址
<a th:href="@{/login}" th:unless=${session.user != null}>Login</a>
th:switch
多路选择配合th:case使用
<div th:switch="${user.role}">
th:fragment
th:switch的一个分支
<p th:case = "'admin'">User is an administrator</p>
th:includ
布局标签,替换内容到引入的文件
<head th:include="layout :: htmlhead" th:with="title='xx'"></head>
th:replace
布局标签,替换整个标签到引入的文件
<div th:replace="fragments/header :: title"></div>
th:selectd
selected选择框选中
th:selected="(${xxx.id} == ${configObj.dd})"
th:src
图片类地址引入
<img class="img-responsive" alt="App Logo" th:src="@{/img/logo.png}" />
th:inline
定义js脚本可以使用变量
<script type="text/javascript" th:inline="javascript">
th:action
表单提交的地址
<form action="subscribe.html" th:action="@{/subscribe}">
th:remove
删除某个属性
1.all:删除包含标签和所有的孩子。2.body:不包含标记删除,但删除其所有的孩子。3.tag:包含标记的删除,但不删除它的孩子。4.all-but-first:删除所有包含标签的孩子,除了第一个。5.none:什么也不做。这个值是有用的动态评估。 ```
th:attr
设置标签属性,多个属性可以用逗号分隔
比如 th:attr=“src=@{/image/aa.jpg},title=#{logo}”,此标签不太优雅,一般用的比较少。