Thymeleaf模板

Thymeleaf模板

Thymeleaf模板

访问静态资源

• 通过@{}引用web静态资源。

<link th:src="@{bootstrap/css/bootstap.css}"
<script th:src="@{bootstrap/js/bootstap.js}"

访问model中的数据

• 通过${}访问model中的属性

<span th:text="${singlePerson.name}"></span>

需要处理的动态内容要加上th：前缀

Thymeleaf中的迭代

<li class="list-group" th:each="person:${person}">
    <span th:text="${person.name}"></span>
    <span th:text="${person.age}"></span>

数据判断

<div th:if="${ not #lists.isEmpty(people) }">
    ...
</div>

注意

• 通过${ not #lists.isEmpty(people) }表达式判断people是否为空。
• Thymeleaf 支持 >、 <、 >=、 <=、 ==、 != 作为比较条件，同时也支持将SpringEL表达式用于条件中。
• 其中与非格式为${ not #lists.isEmpty(要判断的对象) }

在 Javascript 中访问 model

<script th:inline="javascript">
    var single = [[${person}]];
    confole.log(single.name+"/"+single.age);

• 通过 th:inline="javascript" 添加到script标签，这样javascript代码即可访问model中的属性

• 通过[[${ ... }]]格式获得实际的值

• 还有一种是需要在html里访问model的属性

• 需要在列表后每一行后面的按钮获得model中的值

<li class="list-group" th:each="person:${person}">
    <span th:text="${person.name}"></span>
    <button class="ben" th:onclick="getName(\'' + ${person.name} + '\')">获得名字</button>

注意格式：

`th:onclick = "getName(\'' + ${person.name } \'')"`