thymeleaf 学习笔记2

模板布局

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>
时间: 2024-10-16 16:14:03

thymeleaf 学习笔记2的相关文章

Thymeleaf 学习笔记-实例demo(中文教程)

项目demo     http://pan.baidu.com/s/1wg6PC 学习资料网址  http://www.blogjava.net/bjwulin/archive/2013/02/07/395234.html (不做浮躁的人)博文  http://www.blogjava.net/bjwulin/archive/2014/02/11/409734.html (不做浮躁的人)博文<与spring整合> http://www.tuicool.com/articles/yYZbIrB 

Thymeleaf 学习笔记(demo)

项目demo     http://pan.baidu.com/s/1wg6PC 学习资料网址  http://www.blogjava.net/bjwulin/archive/2013/02/07/395234.html (不做浮躁的人)博文 http://www.tuicool.com/articles/yYZbIrB 基本知识 http://itutorial.thymeleaf.org/  官方演示 http://www.cnblogs.com/vinphy/p/4673918.html

thymeleaf 学习笔记-基础篇(中文教程)

转自: http://www.cnblogs.com/vinphy/p/4674247.html (一)Thymeleaf 是个什么? 简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: 1.Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果.这是由于它支持 html 原型,然后在 h

thymeleaf 学习笔记3

十.属性优先级 十一.注释 11.1  <!-- ... -->  同HTML/XML的注释 <!-- User info follows --> <div th:text="${...}"> ... </div> 11.2 thymeleaf解析器注释 thymeleaf解析的时候会被注释,静态打开时会显示 单行   <!--/*  ...   */--> <!--/* This code will be remove

thymeleaf 学习笔记

(一)Thymeleaf 是个什么? 简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: 1.Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果.这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式.浏览器解释 html 时会忽略未定义的标签

thymeleaf 学习笔记(基础)

(一)Thymeleaf 是个什么? 简单说, Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点: 1.Thymeleaf 在有网络和无网络的环境下皆可运行,即它可以让美工在浏览器查看页面的静态效果,也可以让程序员在服务器查看带数据的动态页面效果.这是由于它支持 html 原型,然后在 html 标签里增加额外的属性来达到模板+数据的展示方式.浏览器解释 html 时会忽略未定义的标签

thymeleaf 学习笔记4

十二. thymeleaf内联语法 内联:th:inline,值有三种:text,javascript,none 12.1 th:inline="text"文本内联 <p th:inline="text">Hello, [[${session.user.name}]]!</p> 11.2 th:inline="javascript"脚本内联 <script th:inline="javascript&quo

spring学习笔记(一) Spring概述

博主Spring学习笔记整理大部分内容来自Spring实战(第四版)这本书.  强烈建议新手购入或者需要电子书的留言. 在学习Spring之前,我们要了解这么几个问题:什么是Spring?Spring的优势在哪里?怎么系统的学习Spring? 一.什么是Spring? Spring是一个开源的轻量级Java SE(Java 标准版本)/Java EE(Java 企业版本)开发应用框架,其目的是用于简化企业级应用程序开发. 那有人就会问了,Spring是如何简化开发的? 在传统开发中,一个应用是需

vector 学习笔记

vector 使用练习: /**************************************** * File Name: vector.cpp * Author: sky0917 * Created Time: 2014年04月27日 11:07:33 ****************************************/ #include <iostream> #include <vector> using namespace std; int main