[关闭]
@ruoli 2017-06-09T16:35:34.000000Z 字数 1633 阅读 3511

thymeleaf 常见语法

Web前端


1、模板包含

##

a、同一个页面

模板代码片段,就在本页面中,示例代码如下:

  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org"
  3. xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
  4. <head>
  5. <meta content="text/html;charset=UTF-8" />
  6. </head>
  7. <body>
  8. <!-- 此处是模版 -->
  9. <div th:fragment="copy">
  10. 此处是模版
  11. </div>
  12. <!-- 此处调用模版 -->
  13. <div th:include="::copy"></div>
  14. </body>
  15. </html>

#

b、同一个页面带参数

  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org"
  3. xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
  4. <head>
  5. <meta content="text/html;charset=UTF-8" />
  6. </head>
  7. <body>
  8. <!-- 此处是模版 -->
  9. <div th:fragment="copy(onevar,twovar)">
  10. <p th:text="${onevar} + ' - ' + ${twovar}">...</p>
  11. </div>
  12. <!-- 此处调用模版,共有如下两种方式 -->
  13. <div th:include="::copy('ee','yy')"></div>
  14. <div th:include="::copy(onevar='bb',twovar='aa')"></div>
  15. </body>
  16. </html>

c、模板定义与调用 在不同页面

定义模板 footer.html,示例如下:

  1. <div th:fragment="copy">
  2. © 2016 CodeApe.cn
  3. </div>
  4. <div id="copy_1">
  5. 基于ID属性的模板
  6. </div>

定义调用文件,示例如下:

  1. <!DOCTYPE html>
  2. <html xmlns:th="http://www.thymeleaf.org"
  3. xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
  4. <head>
  5. <meta content="text/html;charset=UTF-8" />
  6. </head>
  7. <body>
  8. <!-- 此处调用模版,如下两种方式 -->
  9. <!-- 基于模版中th:fragment属性 -->
  10. <div th:include="footer::copy"></div>
  11. <!-- 基于模版中Dom选择器 -->
  12. <div th:include="footer::#copy_1"></div>
  13. </body>
  14. </html>

上述最后一种,基于DOM选择器的模板引用,调用格式:th:include="templatename::domselector"
templatename是要引入页面的路劲加上去掉后缀的名称,例如footer.html页面建立在/WEB-INF/templates/footer.html,所以templatename为footer;domselector就是dom选择器,即为th:fragment中的值,或是选择id

2、循环

  1. <tr th:each="model,state:${list}">
  2. <td th:text="${state.index+1}"></td>
  3. <td th:text="${model.name}"></td>
  4. <td th:text="${model.packageName}"></td>
  5. </tr>
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注