八、模板布局（Template Layout）

8.1 包含模板片段（Including template fragments）

定义和引用片段

我们通常想要从别的模板文件中调用一些模板片段，例如页面的头部、底部和菜单...等

th:fragment

定义一个文件 /WEBINF/templates/footer.html

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"

xmlns:th="http://www.thymeleaf.org">

<body>

<div th:fragment="copy">

&copy; 2011 The Good Thymes Virtual Grocery

</div>

</body>

</html>

定义了个名为copy的片段，可以通过用th:include 和 th:replace 放到其他页面中

<body>

<div th:include="footer::copy"></div>

</body>

三种格式：

"templatename::domselector" 或者 templatename::[domselector] ——包含名为templatename的domselector部分，英文原文：Includes the fragment resulting from executing the specified DOM Selector on the template named templatename .
"templatename" ——包含外部模板文件的整个片段
"::domselector"或者"this::domselector" ——包含来自自身模板文件的片段

templatename和domselector部分都可以是其他任何表达式（甚至是条件判断表达式）

<div th:include= "footer::(${user.isAdmin}? #{footer.admin}: #{footer.normaluser})"></div>

Referencing fragments(引用片段) without th:fragment

...

<div id="copy-section">

&copy; 2011 The Good Thymes Virtual Grocery

</div>

...

通过id属性引用上面的片段

<body>

...

    <div th:include="footer:: #copy-section"></div>

</body>

th:include和th:replace(也可写成th:substituteby)的区别

前者包含片段的内容到当前标签内，后者是用整个片段（内容和上一层）替换当前标签（不仅仅是标签内容）。

<footer th:fragment="copy">

&copy; 2011 The Good Thymes Virtual Grocery

</footer>

<body>

...

<div th:include="footer :: copy"></div>

<div th:replace="footer :: copy"></div>

</body>

编译后：

<body>

...

    <div>

        &copy; 2011 The Good Thymes Virtual Grocery

    </div>

    <footer>

        &copy; 2011 The Good Thymes Virtual Grocery

    </footer>

</body>

8.2 可带参数的片段标签（Parameterizable fragment signatures）

<div th:fragment="frag (onevar,twovar)">

    <p th:text="${onevar}+' - ' +${twovar}">...</p>

</div>

<div th:include="::frag(${value1},${value2})">...</div>

<div th:include="::frag(onevar=${value1},twovalue=${vaule2})"></div>

<div th:include="::frag(twovalue=${vaule2},onevar=${value1})"></div>

即使标签没有定义参数,like this:

<div th:fragment="frag">

...

</div>

我们还是可以用这句：

<div th:include="::frag(onevar=${value1},twovar=${value2})"></div>

//等价于 th:include和th:with

<div th:include="::frag" th:with="onevar=${value1},twovar=${value2}"></div>

Note that this specification of local variables for a fragment —no matter whether it has a signature or not— does not cause the context to emptied previously to its execution. Fragments will still be able to access every context variable being used at the calling template like they currently are.

th:assert for in-template assertions

<div th:assert="${onevar},(${twovar} !=43)">...</div>

要验证参数时会派上用场

<header th:fragment="contentheader(title)" th:assert="${!#string.isEmpty(title)}">...</header>

8.3 移除模板标签（Removing template fragments）

th:remove

<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:unless="${#lists.isEmpty(prod.comments)}">view</a>

        </td>

</tr>

<tr class="odd" th:remove="all">

    <td>Blue Lettuce</td>

    <td>9.55</td>

    <td>no</td>

    <td>

        <span>0</span> comment/s

    </td>

</tr>

<tr th:remove="all">

    <td>Mild Cinnamon</td>

    <td>1.99</td>

    <td>yes</td>

    <td>

        <span>3</span> comment/s

        <a href="comments.html">view</a>

    </td>

</tr>

</table>

th:remove="all" ——移除整个元素包括全部子元素

th:remove="body" ——不移除本身标签元素，移除全部子元素

th:remove="tag" ——只移除本身标签元素，子元素还存在的

th:remove="all-but-first" ——移除所有子元素除了第一个子元素

th:remove="none" 不做任何移除

我们来看一个all-but-first的应用场景：

<table>

<thead>

<tr>

<th>NAME</th>

<th>PRICE</th>

<th>IN STOCK</th>

<th>COMMENTS</th>

</tr>

</thead>

<tbody th:remove="all-but-first">

<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:unless="${#lists.isEmpty(prod.comments)}">view</a>

</td>

</tr>

<tr class="odd">

<td>Blue Lettuce</td>

<td>9.55</td>

<td>no</td>

<td>

<span>0</span> comment/s

</td>

</tr>

<tr>

<td>Mild Cinnamon</td>

<td>1.99</td>

<td>yes</td>

<td>

<span>3</span> comment/s

<a href="comments.html">view</a>

</td>

</tr>

</tbody>

</table>

th:remove后面也可以是表达式，只要是返回 ( all , tag , body , all-but-first , none )中的任意一个；th:remove把null看成none，所以也可以返回为null值，所以下面两句话一样。

<a href="/something" th:remove="${condition}? tag">Link text not to be removed</a>

<a href="/something" th:remove="${condition}? tag : none">Link text not to be removed</a>

thymeleaf 模板布局的更多相关文章

Thymeleaf 模板布局三种区别
Thymeleaf 模板
Thymeleaf 模板布局 th:fragment.th:replace.th:insert.th:remove th:fragment 模板布局模板片段说明模板中,经常希望从其他模板中包含⼀ ...
Springboot 使用thymeleaf模板layout布局
使用layout布局前应该在pom文件中导入thymeleaf(dialect)依赖:如下 <properties> <project.build.sourceEncoding> ...
（八）Thymeleaf的 th:* 属性之—— 模板布局& th:with& 属性优先级
3.7 模板布局模板名称:layout.html 3.7.1 th:fragment e.g.模板名为footer.html页面body部分如下: <body> <div th:f ...
Thymeleaf模板的使用
使用模板的要点: 页面主体结构固定,具体参数可变,尽可能让参数动态化,才能提高模板的复用性 ================================================== ...
thymeleaf模板的使用（转）
作者:纯洁的微笑出处:http://www.ityouknow.com/ 在上篇文章springboot(二):web综合开发中简单介绍了一下thymeleaf,这篇文章将更加全面详细的介绍thym ...
Java 前端模板引擎学习：thymeleaf 模板引擎
模板引擎接口 ITemplateEngine 一.后台数据与外部数据 1.处理后台数据 $表达式是个变量表达式,用于处理在 request parameters and the request, s ...
4.3 thymeleaf模板引擎的使用
参考说明:以下笔记参考来自尚硅谷springboot教学中的笔记! thymeleaf官网docs: https://www.thymeleaf.org/documentation.html 模板引擎 ...

随机推荐

文件尾存在EOF吗？
参考:http://bbs.csdn.net/topics/290027166 我們先一起來看看FILE是怎么定義的: FILE <STDI ...
Shell：sed流编辑器
转载:http://blog.sina.com.cn/s/blog_ac9fdc0b0101lvdv.html sed和awk是永远地痛,学了又忘,主要是木有横向对比过,所以总把握不到精髓.它可以完美 ...
在 CentOS 中编译安装 VIM 7.3
转载:http://blog.csdn.net/zhanglyung/article/details/6204574 默认安装的 Vim 不带有多字符支持,所以不支持中文.无论是将 CentOS 本来 ...
面试常考的常用数据结构与算法(zz)
数据结构与算法,这个部分的内容其实是十分的庞大,要想都覆盖到不太容易.在校学习阶段我们可能需要对每种结构,每种算法都学习,但是找工作笔试或者面试的时候,要在很短的时间内考察一个人这方面的能力,把每种结 ...
Github 的一些基本操作
1.创建一个新的repository: 先在github上创建并写好相关名字,描述.例如这样一个地址: https://github.com/test/test2.git 回到本地目录如hellowo ...
Java二叉搜索树实现
树集合了数组(查找速度快)和链表(插入.删除速度快)的优点二叉树是一种特殊的树,即:树中的每个节点最多只能有两个子节点二叉搜索树是一种特殊的二叉树,即:节点的左子节点的值都小于这个节点的值,节点的 ...
LeetCode 292
Nim Game You are playing the following Nim Game with your friend: There is a heap of stones on the t ...
[改善Java代码]对字符串排序持一种宽容的心态
在Java中一涉及到中文处理就会冒出很多的问题来,其中的排序也是一个让人头疼的问题,看代码: import java.util.Arrays; public class Client { public ...
[改善Java代码]用整数类型处理货币
建议22:用整数类型处理货币. public class Client { public static void main(String[] args) { System.out.println(&q ...
hdu 4605 线段树与二叉树遍历
思路: 首先将所有的查询有一个vector保存起来.我们从1号点开始dfs这颗二叉树,用线段树记录到当前节点时,走左节点的有多少比要查询该节点的X值小的,有多少大的, 同样要记录走右节点的有多少比X小 ...

thymeleaf 模板布局

八、模板布局（Template Layout）

thymeleaf 模板布局的更多相关文章

随机推荐

热门专题