thymeleaf部分总结

基于 3.0.9.RELEASE的文档,部分总结,不全。

目录

1,简单表达式

1.1,变量表达式${}

1.1.1,基本表达式对象

1.1.2,工具表达式对象

1.2,选择变量表达式*{}

1.3,消息(i18n)表达式#{}

1.4,链接(URL)表达式@{}

1.4.1,首页菜单

1.4.2,服务器root相对url

1.5,片段表达式~{}

1.6,字面量

1.6.1,文本

1.6.2,数字

1.6.3,布尔值

1.6.4,空值

1.6.5,文字令牌(Literal tokens)

1.7,附加文本

1.9,算术运算

1.10,比较运算

1.11,条件表达式

1.12,缺省表达式(Elvis运算符)

1.13,无操作令牌

1.14,数据转换/格式化

1.15,表达式预处理

2、设置属性值

2.1,为任意属性设值-th:attr

2.2,为指定属性设值-th:*

2.3,同时设置多个值

2.4,附加和前置

2.5,固定值的布尔属性

2.6,设置任何属性的默认值(默认属性处理器)

2.7,html5支持

3、迭代器

3.1,属性th:each

3.2,迭代器的内部状态

3.3,延迟抓取数据优化性能

4、条件求值

4.1,if和unless

4.2,swith

5、模板布局

5.1,引入模板片段

5.1.1,定义和引用片段

5.1.2,片段规范语法

5.1.3,无th:fragment引用片段

5.1.4,th:insert和th:replace的区别

5.2,可参数化的片段签名

5.2.1,无片段参数的片段局部变量

5.2.2,th:assert模板内断言

5.3,灵活的布局:不仅是插入片段

5.3.1,使用空片段

5.3.2,使用空操作令牌

5.3.3,高级带条件的片段

5.5,布局继承结构

6,内联

6.1,表达式内联

6.1.1,内联与自然模板对比

6.1.2,禁用内联

6.2,文本内联

6.3,JS内联

6.3.1,JS自然模板

6.3.2,高级内联计算和JS序列化

6.4,CSS内联

6.4.1,高级特性:CSS自然模板等


1,简单表达式

1.1,变量表达式${}

变量表达式是对包含在上下文的变量map上执行的OGNL表达式。在Spring中,支持mvc的应用程序OGNL将被SpringEL所取代,但它的语法与OGNL非常相似。

从OGNL的语法中,我们知道:

Today is: 13 february 2011.

实际上等价于:

ctx.getVariable("today");

不过,OGNL允许创建更强大的表达式,这就是为什么下面的表达式:

  Welcome to our grocery store, Sebastian Pepper!

通过执行以下命令,能够获得用户名:

((User) ctx.getVariable("session").get("user")).getName();

但是,getter方法的调用方式只是OGNL的特性之一。

1.1.1,基本表达式对象

当在上下文变量上计算OGNL表达式时,为了获得更高的灵活性,可以将一些对象提供给表达式。这些对象将通过#引用(按照OGNL标准)。

#ctx,the context object.

#vars,the context variables.

#locale,the context locale.

#request,(only in Web Contexts) the HttpServletRequest object.

#response,(only in Web Contexts) the HttpServletResponse object.

#session,(only in Web Contexts) the HttpSession object.

#servletContext,(only in Web Contexts) the ServletContext object.

例如:

Established locale country: US.

1.1.2,工具表达式对象

除了基本对象之外,Thymeleaf还提供了一组实用程序对象,帮助我们在表达式中执行常见任务。

#execInfo,information about the template being processed.

#messages,methods for obtaining externalized messages inside variables expressions, in the same way as they would be obtained using #{…} syntax.

#uris,methods for escaping parts of URLs/URIs

#conversions,methods for executing the configured conversion service (if any).

#dates,methods for java.util.Date objects: formatting, component extraction, etc.

#calendars,analogous to #dates, but for java.util.Calendar objects.

#numbers,methods for formatting numeric objects.

#strings,methods for String objects: contains, startsWith, prepending/appending, etc.

#objects,methods for objects in general.

#bools,methods for boolean evaluation.

#arrays,methods for arrays.

#lists,methods for lists.

#sets,methods for sets.

#maps,methods for maps.

#aggregates,methods for creating aggregates on arrays or collections.

#ids,methods for dealing with id attributes that might be repeated (for example, as a result of an iteration).

例子:

Today is: 13 february 2011.

其中,"13 february 2011"只是对today变量的说明,不管today的值是否为空,today都不会被其替换掉。若要使用默认表达式,可用下例:

Today is: 13 february 2011.

1.2,选择变量表达式*{}

变量表达式不仅可以写成${},还可以写成*{}。

不过,有一个重要区别:星号语法计算的是选定对象的表达式,而不是整个上下文。也就是说,只要没有选定对象,【$】和【*】语法就完全相同。

使用th:object属性的表达式就是选择对象。例如:

Name: Sebastian.

Surname: Pepper.

Nationality: Saturn.

相当于:

Name: Sebastian.

Surname: Pepper.

Nationality: Saturn.

当然,【$】和【*】语法可以混合使用。

Name: Sebastian.

Surname: Pepper.

Nationality: Saturn.

当对象选择就绪时,选中的对象也可以作为#object表达式变量提供给$表达式。

Name: Sebastian.

Surname: Pepper.

Nationality: Saturn.

如前所述,如果没有进行对象选择,则【$】和【*】语法是等效的。

Name: Sebastian.

Surname: Pepper.

Nationality: Saturn.

1.3,消息(i18n)表达式#{}

消息表达式(通常称为文本外部化,国际化或i18n)允许从外部源(如:.properties)文件中检索特定于语言环境的消息,通过键来引用消息内容。

在Spring应用程序中,它将自动与Spring的MessageSource机制集成。如下:

#{main.title}
#{message.entrycreated(${entryId})}

以下是在模板中使用的方式:


  ...
  
  ...
... ...

请注意,如果希望消息键由上下文变量的值确定,或者希望将变量指定为参数,则可以在消息表达式中使用变量表达式:

#{${config.adminWelcomeKey}(${session.user.name})}

1.4,链接(URL)表达式@{}

由于URL的重要性,它们是web应用程序模板中的头等元素,Thymeleaf标准方言有特殊的语法处理。

下面是不同类型的URL:

  • 绝对地址的URLs,如http://www.thymeleaf.org
  • 相对地址的URLs,可以是:
  1. Page-relative,如,user/login.html
  2. Context-relative,如,/itemdetails?id=3(服务端自动会加上下文名称)
  3. Server-relative,如,~/billing/processInvoice(允许在同一服务器的不同上下文[如application]中调用这些URL)
  4. Protocol-relative URLs,如,//code.jquery.com/jquery-2.0.3.min.js

这些表达式的实际处理以及它们对将要输出的url的转换是通过实现org.thymeleaf.linkbuilder.ILinkBuilder接口完成的,该接口注册到使用ITemplateEngine的对象上。

默认情况下,这个接口的单个实现注册了org.thymeleaf.linkbuilder.StandardLinkBuilder类,这对于脱机(非web)和基于Servlet API的web场景都足够了。其它场景(比如与非servlet api web框架的集成)可能需要链接构建器接口的特定实现。

让我们使用这个新语法。满足th:href的属性:


view


view


view

注意:

  1. th:href是一个修饰符属性:处理完之后,它将计算要使用的链接URL,并将该值设置为标记的href属性。
  2. 可为URL参数使用表达式(在orderId=${o.id}中),所需的URL参数编码操作也会自动执行。
  3. 用逗号分隔多个参数:@{/order/process(execId=${execId},execType='FAST')}
  4. 在URL路径中允许使用变量模板:@{/order/{orderId}/details(orderId=${orderId})}
  5. 以/(如/order/details)开头的相对URL将自动以应用程序上下文名称作为前缀。
  6. 如果不启用cookie,或者还不知道,可能会将";jsessionid=.."后缀添加到相对URL中,以便保存会话。这就是所谓的URL重写,Thymeleaf允许您插入自己的重写过滤器,方法是通过Servlet API为每个URL使用response.encodeURL()机制。
  7. th:href属性允许在模板中(可选地)有一个正在工作的静态href属性,这样当为原型设计而直接打开模板链接时,仍然可以被浏览器导航。

和消息语法(#{…})一样,URL也可以作为计算另一个表达式的结果的基础元素:

view
view

1.4.1,首页菜单

在主页上为站点中的其它页面添加一个菜单。

Please select an option

  1. Product List
  2. Order List
  3. Subscribe to our Newsletter
  4. See User Profile

1.4.2,服务器root相对url

可以使用额外的语法创建服务器root相对url(而不是上下文root相对url),以便链接到同一服务器中的不同上下文。这些url被指定为@{~/path/to/something}

1.5,片段表达式~{}

片段表达式是表示标记(markup)片段并在模板中移动它们的一种简单方法。可以复制它们,将它们作为参数传递给其它模板。

最常见的用法是使用th:insert或th:replace插入片段:

...

它们可以在任何地方使用,就像任何其它变量一样:

在后面有一个专门介绍模板布局的部分,其中包括对片段表达式的更深入解释。

片段表达式可以有参数。

1.6,字面量

1.6.1,文本

文本文字只是在单引号之间指定的字符串。它们可以包含任何字符,但是要使用\'转义其中的任何单引号。

Now you are looking at a template file.

1.6.2,数字

数字字面值就是:数字。

The year is 1492.

In two years, it will be 1494.

1.6.3,布尔值

true和false。

...

在本例中,【== false】写在大括号外面,所以是Thymeleaf处理它。如果写在大括号内,就是OGNL/SpringEL处理。

...

1.6.4,空值

可以用null字面量表示空值。

...

1.6.5,文字令牌(Literal tokens)

数字、布尔和null值实际上是文字令牌的一种特殊情况。

这些tokens允许在标准表达式中做一点简化。它们的工作原理和文本文字('..')完全一样,但是只允许字母(A-Z和A-Z)、数字(0-9)、括号([和])、点(.)、连字符(-)和下划线(_),不能有空格,逗号等。

看上去简洁吗?令牌不需要任何引号,象这样:

...

用以替代下面的写法:

...

1.7,附加文本

只要是字面量,无论它们是文字,还是变量运算或消息表达式的结果,都可以很容易地使用【+】操作符追加:

1.8,字面量替换(Literal substitutions)

字面值替换允许对包含变量值的字符串进行简单格式化,而不需要在字面值后面加上'..'+'..'。必须用【|】包围被替换的内容,比如:

等于:

文字替换可以与其它类型的表达式组合:

只有变量/消息表达式(${},{},#{})可以在【|..|】做替换。其它的文字不行,如:布尔/数字标记,条件表达式等。

1.9,算术运算

算术运算符:+,-,*,/和%。

注意,这些操作符也可用于OGNL内的变量表达式本身(在这种情况下,OGNL将执行算术操作,而不再是Thymeleaf的标准表达式引擎):

有些算术操作符存在字面量别名:div(/),mod(%)。

1.10,比较运算

表达式中的值可以与>、<、>=和<=符号进行比较,并且可以使用==和!=操作符检查是否相等(或是否不等)。XML规定不应该在属性值中使用<和>符号,因此应该用<和>替换它们。

另一种更简单的方法是使用这些操作符的文本别名:gt(>)、lt(<)、ge(>=)、le(<=)、not(!),eq(==),neq/ne(!=)。

1.11,条件表达式

条件表达式仅用于根据条件(本身是另一个表达式)的计算结果来计算两个表达式中的一个。

示例片段:


  ...

条件表达式的所有3个部分(条件,then和else)本身就是表达式,这意味着它们可以是变量(${},*{}),消息(#{}),url(@{})或文本('')。

条件表达式也可以用括号嵌套:


  ...

Else表达式也可以省略,如果条件为false,则返回null值:


  ...

1.12,缺省表达式(Elvis运算符)

缺省表达式是一种没有then部分的特殊条件值。它相当于Groovy等语言中的Elvis运算符,允许指定两个表达式:如果第一个表达式的值不等于null,就使用第一个表达式,如果它等于null,就使用第二个表达式。例如:

...

Age: 27.

如你所见,操作符是【?:】,这里使用它来指定一个名称的默认值(文字值),前提是计算*{age}的结果为null。因此,它等于:

Age: 27.

与条件值一样,可以在括号之间嵌套表达式:

Name: Sebastian

1.13,无操作令牌

无操作令牌由一个下划线符号(_)表示。

这个令牌背后的思想是让指定表达式的期望结果什么都不做,也就是说,正如可处理属性(例如th:text)根本不存在一样。

还有,允许开发人员使用原型文本作为默认值。例如:

...

可以直接用'no user authenticated'作为原型文本,从设计的角度来看,这样的代码更加简洁和通用:

no user authenticated

1.14,数据转换/格式化

Thymeleaf为变量(${})和选择变量(*{})表达式定义了双大括号({{}})语法,允许通过可配置的转换服务方法应用于数据转换。例如:

...

注意到双括号了吗?:$ {{}}。它指示Thymeleaf将user.lastAccessDate表达式的结果传递给转换服务,并要求它在写入结果之前执行格式化操作(转换为字符串)。

假设user.lastAccessDate是java.util.Calendar类型,如果已经注册了一个转换服务(IStandardConversionService的实现),并且包含一个Calendar -> String的有效转换,则执行转换。

IStandardConversionService的默认实现(StandardConversionService类)对任何转换为String的对象执行.tostring()。

Thymeleaf-spring3和Thymeleaf-spring4集成包透明地将Thymeleaf的转换服务机制与Spring的转换服务集成在一起,这样,在Spring配置中声明的转换服务和格式化程序将自动提供给${{}}和{{}}表达式。

1.15,表达式预处理

除了这些用于表达式处理的特性之外,Thymeleaf还具有预处理表达式的特性。

预处理是在正常表达式之前执行的表达式,允许修改最终将执行的表达式。

预处理表达式与普通表达式完全相同,但被双下划线符号(如__${expression}__)包围。

假设有一个i18n的Messages_fr.properties入口项包含一个OGNL表达式,该表达式调用特定于语言的静态方法,如:

[email protected]@translateToFrench({0})

Messages_es.properties等价于:

[email protected]@translateToSpanish({0})

可以创建一个标记片段,根据语言环境来计算一个表达式或另一个表达式。为此,首先选择表达式(通过预处理),然后让Thymeleaf执行:

Some text here...

请注意,法语环境的预处理步骤将创建以下等效项:

Some text here...

预处理字符串【__】可以用【\_\_】在属性中转义。

2、设置属性值

2.1,为任意属性设值-th:attr

创建subscribe.html,一个带有form的模板,内容:

这个模板开始时更像一个静态原型,而不是web应用程序的模板。首先,表单中的action属性静态链接到模板文件本身,这样就没地方进行有用的URL重写。其次,submit按钮中的value属性使其显示英语文本,但我们希望它国际化。

使用th:attr属性,以及它改变标签属性值的能力,更改内容:

th:attr只是接受一个表达式,将值赋给一个属性。在创建了相应的控制器和消息文件后,处理该文件的结果为:

一次赋予多个值,用逗号分隔。


输出结果:

Logo de Good Thymes

2.2,为指定属性设值-th:*

为属性赋值时,可能想这样:

但这是一个很难看的标记。在属性值中指定赋值可能非常实用,但这样做并不是创建模板最优雅的方式。

这也是Thymeleaf为什么在模板中很少使用attr的原因。通常,要使用其它th:*属性,其目标是设置特定的标记属性(而不是像th:attr这样的任意属性)。

例如,要设置value属性,就使用th:value:

这样看起来就好多了,现在,对表单中的action属性做同样的操作:

类似的属性有很多,每一个都对应一个特定的HTML5属性:

th:abbr

th:accept

th:accept-charset

th:accesskey

th:action

th:align

th:alt

th:archive

th:audio

th:autocomplete

th:axis

th:background

th:bgcolor

th:border

th:cellpadding

th:cellspacing

th:challenge

th:charset

th:cite

th:class

th:classid

th:codebase

th:codetype

th:cols

th:colspan

th:compact

th:content

th:contenteditable

th:contextmenu

th:data

th:datetime

th:dir

th:draggable

th:dropzone

th:enctype

th:for

th:form

th:formaction

th:formenctype

th:formmethod

th:formtarget

th:fragment

th:frame

th:frameborder

th:headers

th:height

th:high

th:href

th:hreflang

th:hspace

th:http-equiv

th:icon

th:id

th:inline

th:keytype

th:kind

th:label

th:lang

th:list

th:longdesc

th:low

th:manifest

th:marginheight

th:marginwidth

th:max

th:maxlength

th:media

th:method

th:min

th:name

th:onabort

th:onafterprint

th:onbeforeprint

th:onbeforeunload

th:onblur

th:oncanplay

th:oncanplaythrough

th:onchange

th:onclick

th:oncontextmenu

th:ondblclick

th:ondrag

th:ondragend

th:ondragenter

th:ondragleave

th:ondragover

th:ondragstart

th:ondrop

th:ondurationchange

th:onemptied

th:onended

th:onerror

th:onfocus

th:onformchange

th:onforminput

th:onhashchange

th:oninput

th:oninvalid

th:onkeydown

th:onkeypress

th:onkeyup

th:onload

th:onloadeddata

th:onloadedmetadata

th:onloadstart

th:onmessage

th:onmousedown

th:onmousemove

th:onmouseout

th:onmouseover

th:onmouseup

th:onmousewheel

th:onoffline

th:ononline

th:onpause

th:onplay

th:onplaying

th:onpopstate

th:onprogress

th:onratechange

th:onreadystatechange

th:onredo

th:onreset

th:onresize

th:onscroll

th:onseeked

th:onseeking

th:onselect

th:onshow

th:onstalled

th:onstorage

th:onsubmit

th:onsuspend

th:ontimeupdate

th:onundo

th:onunload

th:onvolumechange

th:onwaiting

th:optimum

th:pattern

th:placeholder

th:poster

th:preload

th:radiogroup

th:rel

th:rev

th:rows

th:rowspan

th:rules

th:sandbox

th:scheme

th:scope

th:scrolling

th:size

th:sizes

th:span

th:spellcheck

th:src

th:srclang

th:standby

th:start

th:step

th:style

th:summary

th:tabindex

th:target

th:title

th:type

th:usemap

th:value

th:valuetype

th:vspace

th:width

th:wrap

th:xmlbase

th:xmllang

th:xmlspace

2.3,同时设置多个值

有两个非常特殊的属性称为th:alt-title和th:lang-xmllang,它们可以同时将两个属性设置为相同的值。

  1. th:alt-title,同时设置alt和title。
  2. th:lang-xmllang,同时设置lang和xml:lang。

例如:


等价于:


等价于:


2.4,附加和前置

th:attrappend和th:attrprepend属性将它们的计算结果附加到现有属性值上(后缀或前缀)。

例如,将要添加的CSS类的名称(不是设置,只是添加)存储到上下文变量中的某个按钮中。因为要使用的特定CSS类依赖于用户已产生的行为:

如果将这个模板的cssStyle变量设置为"warning",将得到:

在标准方言中也有两个附加属性th:classappend和th:styleappend,用于向元素中添加CSS类或style片段,而不覆盖现有的类:

2.5,固定值的布尔属性

HTML有布尔属性的概念,但没有具体的值,只要这个属性出现了,就意味着值是"true"。在XHTML中,这些属性也只接受"1"这个值,也就是它本身。

例如checked:

 
 

在标准方言中包含的布尔属性可以通过计算条件来设置它的值,这样如果计算的结果为true,布尔属性将被设置为它的固定值,如果为假,就不会被设置:

在标准方言中的布尔属性:

th:async

th:autofocus

th:autoplay

th:checked

th:controls

th:declare

th:default

th:defer

th:disabled

th:formnovalidate

th:hidden

th:ismap

th:loop

th:multiple

th:novalidate

th:nowrap

th:open

th:pubdate

th:readonly

th:required

th:reversed

th:scoped

th:seamless

th:selected

2.6,设置任何属性的默认值(默认属性处理器)

Thymeleaf提供了一个默认的属性处理器,它允许我们设置任何属性的值,即使在标准方言中没有为其定义特定的th:*处理器。

例如:

...

它的结果是:

...

2.7,html5支持

... ...

data-{prefix}-{name}语法是在HTML5中编写自定义属性的标准方式,无需开发人员使用th:*这样的名称空间。Thymeleaf使这种语法自动适用于所有方言(不仅仅是标准方言)。

还有一个用于特定自定义标签的语法:{prefix}-{name},它遵循W3C自定义元素的规范。例如,上述方式可用于th:block元素(或者th-block)。

3、迭代器

3.1,属性th:each

NAME PRICE IN STOCK
Onions 2.41 yes
  1. ${prods},被称为被迭代的表达式或被迭代的变量。
  2. prod,被称为迭代变量,它的作用域是在内,意味着可用于内部的所有。

3.2,迭代器的内部状态

  1. index,当前迭代器的索引,从0开始。
  2. count,当前迭代器的计数,从1开始。
  3. size,迭代器中的元素数量。
  4. current,当前迭代子变量。
  5. even/odd,布尔属性。
  6. first,布尔属性。
  7. last,布尔属性。

例如:

NAME PRICE IN STOCK
Onions 2.41 yes

状态变量iterStat就是在th:each中定义的,方法是在iter变量后加上一个逗号。

上述模板的执行结果如下:

NAME PRICE IN STOCK
Fresh Sweet Basil 4.99 yes
Italian Tomato 1.25 no
Yellow Bell Pepper 2.50 yes
Old Cheddar 18.75 yes

如果没有显式地设置状态变量,Thymeleaf会将Stat放到迭代变量的后面来创建一个。

NAME PRICE IN STOCK
Onions 2.41 yes

3.3,延迟抓取数据优化性能

正常的:

  • user name

延迟的:

  • user name

4、条件求值

4.1,if和unless

例如,假设我们希望在产品表中显示一列,其中包含每个产品的评论数量,如果有评论,则显示该产品的评论详情页面的链接。

NAME PRICE IN STOCK COMMENTS
Onions 2.41 yes 2 comment/s view

模板展开后的结果:

NAME PRICE IN STOCK COMMENTS
Italian Tomato 1.25 no 2 comment/s view
Yellow Bell Pepper 2.50 yes 0 comment/s
Old Cheddar 18.75 yes 1 comment/s view

th:if属性不仅仅计算布尔条件,它还会多做些,它按照以下规则将指定的表达式计算为true:

如果value非空。

1、如果是布尔型,并且是true。

2、如果是数值型,并且非0。

3、如果是字符型,并且非0。

4、如果是string型,并且不是"false","off"或"no"。

5、如果不是以上4种。

如果value是空的,就直接返回false。

th:if还有一个逆属性th:unless,执行逻辑与if相反。

4.2,swith

与Java中的switch基本相同,th:switch / th:case属性集。

User is an administrator

User is a manager

User is some other thing

th:case="*",是默认分支。

5、模板布局

5.1,引入模板片段

5.1.1,定义和引用片段

通过th:fragment定义片段,如footer.html。



  
    
© 2011 The Good Thymes Virtual Grocery

这个片段名为"copy",使用th:insert或th:replace将它包含在需要的地方。


  ...
  

【~{,}】是可选的,因此上面的代码等于:


  ...
  

5.1.2,片段规范语法

片段定义语法有3中不同的格式。

  1. "~{templatename::selector}",在模板templatename上应用指定的标记选择器生成的片段。注意,选择器可以只是一个片段名,因此可以指定一些简单的东西,比如上面的~{templatename::fragmentname}。标记选择器语法由底层AttoParser解析库定义,类似于XPath表达式或CSS选择器。
  2. "~{templatename}",包含名为templatename的完整模板。
  3. "~{::selector}"或"~{this::selector}",根据指定的selector从当前模板中插入片段。如果在模板上没有找到匹配的选择器,那么模板调用(插入)栈将一直遍历到最初处理的模板(根)处,直到选择器在某种程度上匹配到为止。

上面提到的templatename和selector都可以是全特性表达式(甚至是条件语句)。

5.1.3,无th:fragment引用片段

© 2011 The Good Thymes Virtual Grocery

引用方式:

5.1.4,th:insert和th:replace的区别

  1. th:insert,简单地插入指定的片段作为其宿主标记的主体。
  2. th:replace,用指定的片段替换它的宿主标记。

例如:

© 2011 The Good Thymes Virtual Grocery

引入:


  

结果:


  
© 2011 The Good Thymes Virtual Grocery
© 2011 The Good Thymes Virtual Grocery

5.2,可参数化的片段签名

为使创建模板片段更象函数定义,可在模板定义时指定一组参数。

...

使用方式:

...
...

注意,在最后一个选项中顺序并不重要:

...

5.2.1,无片段参数的片段局部变量

即使片段定义没有参数:

...

仍然可使用上面的第二种语法来调用它们(并且只使用第二种语法):

结果等价于th:replace和th:with的组合:

注意,这个片段的局部变量规范--不管它是否具有参数签名--不会导致上下文在执行之前被清空。片段仍然能够访问调用模板中使用的每个上下文变量,就像现在一样。

5.2.2,th:assert模板内断言

可以指定一个逗号分隔的表达式列表,会对所有表达式求值,并对每个求值生成true,否则会引发异常。

...

这有助于在片段签名处验证参数:

...

5.3,灵活的布局:不仅是插入片段

多亏了片段表达式,我们可以为片段指定参数,这些片段不是文本、数字、bean对象,而是标记片段。

这使我们能够以一种方式创建片段,这样就可以使用来自调用模板的标记使片段更丰富多样,从而形成非常灵活的模板布局机制。

注意下面片段中的title和links变量的使用:



  The awesome application

  
  
  
  

  
  


现在可以这样调用这个片段:



  Awesome - Main

  
  


结果将使用调用模板中的实际和<link>标签作为title和links变量的值,从而导致片段在插入期间可被定制。</p> <pre class="has"><code><head> <title>Awesome - Main

5.3.1,使用空片段

一个特殊的片段表达式,空片段(~{}),可以用来指定没有标记。使用前面的例子:


  Awesome - Main

注意,片段(links)的第二个参数是如何设置为空片段的以及块是如何没写如何东西的。


  Awesome - Main
  
  
  
  

5.3.2,使用空操作令牌

如果我们只想让fragment使用它的当前标记作为默认值,那么no-op也可以用作fragment的参数。同样,使用common_header示例:



  Awesome - Main

  
  


看看如何将title参数(common_header片段的第一个参数)设置为no-op(_),会导致片段的这一部分根本没有执行(title = no-operation):

  The awesome application

因此,结果如下:


  The awesome application

  
  
  
  

  
  


5.3.3,高级带条件的片段

emtpy片段和no-operation令牌的可用性允许我们以一种非常简单和优雅的方式执行片段的条件插入。

例如,只有当用户是管理员时,才能插入common::adminhead片段,如果不是管理员,则不插入任何内容(emtpy片段):

...

还有,使用no-operation令牌的目的,就是只有在满足指定条件的情况下才插入片段,如果条件不满足,则不修改标记:

Welcome [[${user.name}]], click here for help-desk support.

另外,如果配置了模板解析器来检查模板资源是否存在--通过它们的checkExistence标志--可以使用片段本身的存在作为默认操作中的条件:



Welcome [[${user.name}]], click here for help-desk support.

5.4,删除模板片段

回到示例应用程序,让我们回顾一下产品列表模板的最后一个版本:

NAME PRICE IN STOCK COMMENTS
Onions 2.41 yes 2 comment/s view

这段代码正好可以作为一个模板,但是作为一个静态页面(当通过浏览器直接打开而Thymeleaf没有对其进行处理时),它并不是一个好的原型。

为什么呢?因为,尽管浏览器可以完美地显示出来,但是该表只有一行,而这一行有模拟数据。作为一个原型,它看起来不够真实...应该有更多的产品,需要更多行。那就再加些。

NAME PRICE IN STOCK COMMENTS
Onions 2.41 yes 2 comment/s view
Blue Lettuce 9.55 no 0 comment/s
Mild Cinnamon 1.99 yes 3 comment/s view

好的,现在有了三个,对于原型来说肯定更好。当用Thymeleaf处理时会发生什么呢?结果如下:

NAME PRICE IN STOCK COMMENTS
Fresh Sweet Basil 4.99 yes 0 comment/s
Italian Tomato 1.25 no 2 comment/s view
Yellow Bell Pepper 2.50 yes 0 comment/s
Old Cheddar 18.75 yes 1 comment/s view
Blue Lettuce 9.55 no 0 comment/s
Mild Cinnamon 1.99 yes 3 comment/s view

最后两行竟然是模拟行!结果就是:迭代只在第一行起作用了,而Thymeleaf也没有理由去删除另外两行。

我们需要一种在模板处理过程中删除这两行代码的方法。让我们在第2、3个标签上使用th:remove。

NAME PRICE IN STOCK COMMENTS
Onions 2.41 yes 2 comment/s view
Blue Lettuce 9.55 no 0 comment/s
Mild Cinnamon 1.99 yes 3 comment/s view

最终结果,符合预期:

NAME PRICE IN STOCK COMMENTS
Fresh Sweet Basil 4.99 yes 0 comment/s
Italian Tomato 1.25 no 2 comment/s view
Yellow Bell Pepper 2.50 yes 0 comment/s
Old Cheddar 18.75 yes 1 comment/s view

在属性中的all值是什么意思?th:remove有五种不同的行为方式,具体取决于它的值:

all,删除包含all的标签及其所有子标签。

body,不删除包含body的标签,而是删除它的所有子标签。

tag,删除包含tag的标签,但不删除它的子标签。

all-but-first,删除包含它的标签的所有子标签,第一个标签除外。

none,什么都不做。这个值对于动态评估很有用。

示例:

NAME PRICE IN STOCK COMMENTS
Onions 2.41 yes 2 comment/s view
Blue Lettuce 9.55 no 0 comment/s
Mild Cinnamon 1.99 yes 3 comment/s view

5.5,布局继承结构

为了能够将单个文件作为布局,可以使用片段。一个使用th:fragment和th:replace,拥有标题和内容的简单布局示例:




    Layout Title


    

Layout H1

Layout content

Layout footer

这个示例声明了一个名为layout的片段,其中包含title和content作为参数。两者在页面上都将被替换,通过下面示例中提供的片段表达式继承它。




    Page Title


Page content

Included on page

在这个文件中,html标签将被布局所取代,但布局的title和content又将分别被title和section块所取代。

如果需要,布局可以由作为页眉和页脚的几个片段组成。

6,内联

6.1,表达式内联

尽管标准方言允许我们使用标记属性来做几乎所有的事情,但在某些情况下,我们更喜欢直接将表达式写入HTML文本。例如,我们更喜欢这样写:

Hello, [[${session.user.name}]]!

用于取代:

Hello, Sebastian!

在Thymeleaf中可把[[]]或[()]之间的表达式视为内联表达式,并且在它们内部,我们可以使用任何在th:text或th:utext属性中有效的表达式。

注意,当[[]]对应th:text(即结果将被html转义),[()]对应th:utext时,不会执行任何html转义。因此,对于一个变量,如msg = 'This is great!',片段内容如下:

The message is "[(${msg})]"

结果是那些标签没有被转义,所以:

The message is "This is great!"

如果要转义,就得象这样:

The message is "[[${msg}]]"

Html的转义结果:

The message is "This is <b>great!</b>"

注意,文本内联在所有标记的标签体内默认都是激活的,不是标签本身。

6.1.1,内联与自然模板对比

之所以不将内联方式作为文本标签的默认输出方式,是因为在浏览器中静态打开时,它们会逐字显示在html的文件中。这样就不能将它们作为设计原型使用了。

浏览器在不使用内联的情况下静态显示代码片段的区别:

Hello, Sebastian!

使用的情况:

Hello, [[${session.user.name}]]!

6.1.2,禁用内联

在某些情况下,我们确实想要输出[[]]或[()]序列,其内容不作为表达式处理。为此,要使用th:inline="none":

A double array looks like this: [[1, 2, 3], [4, 5]]!

显示结果:

A double array looks like this: [[1, 2, 3], [4, 5]]!

6.2,文本内联

文本内联与表达式内联功能非常相似,实际上增加了更多功能,必须显式启用th:inline="text"。

文本内联不仅允许使用相同的内联表达式,而且可以像在文本模式中处理模板一样地处理标签的body,这允许我们执行基于文本的模板逻辑(不仅仅是输出表达式)。

6.3,JS内联

JavaScript内联允许在HTML模板模式下处理的模板中更好地集成JavaScript

执行结果:


在上面的代码中需要注意两件重要的事情:

首先,JavaScript内联不仅会输出所需的文本,还会用引号和JavaScript转义符将其内容括起来,以便将表达式结果输出为格式良好的JavaScript文字。

其次,之所以会这样,是因为输出了转义后的${session.user.name}表达式,也就是用双括号表达式:[[${session.user.name}]]达到的效果。

如果用非转义的话,就像这样:


执行结果:


这是难看的JavaScript代码。但如果通过添加内联表达式来构建脚本的某些部分,那么输出一些未转义的内容可能就是我们所需要的,所以手边有这个工具很好。

6.3.1,JS自然模板

JavaScript内联机制的能力远不止将JavaScript特有的转义和输出表达式结果作为有效的字面值这些事。

例如,可以将(转义的)内联表达式封装在JavaScript注释中,比如:


Thymeleaf会忽略我们在注释后面和分号前面所写的所有内容(在本例中是'Gertrud Kiwifruit'),所以,执行这个操作的结果与不使用包装注释时完全一样:


但是,再仔细看上面使用内联的模板代码,这是有效的JavaScript代码。当以静态方式打开模板文件时(无需在服务器上执行),它将完美地执行。

6.3.2,高级内联计算和JS序列化

关于JavaScript内联,需要注意的一件重要事情是,这种表达式求值是智能的,并不局限于字符串。Thymeleaf会正确地用JavaScript语法编写以下对象:

  1. Strings
  2. Numbers
  3. Booleans
  4. Arrays
  5. Collections
  6. Maps
  7. Beans

例如,有如下代码:


${session.user}表达式将赋值给user对象,Thymeleaf将正确地把它转换为Javascript语法。


这种JavaScript序列化的方式是通过org.thymeleaf.standard.serializer.IStandardJavaScriptSerializer接口的实现来实现的,这个接口可以在模板引擎中使用的标准方言的实例中配置。

这个JS序列化机制的默认实现将在类路径中查找Jackson库,如果存在,就使用它。如果没有,就用一个内置的序列化机制来满足大多数场景的需求,并产生类似的结果(但是不那么灵活)。

6.4,CSS内联

Thymeleaf还允许在CSS

例如,有两个变量设置为两个不同的字符串值:

classname = 'main elems'
align = 'center'

可以像这样使用它们:


结果如下:


CSS内联就像JavaScript内联一样具备一定的智能,具体就是,通过[[${classname}]]这样的转义表达式输出的表达式将转义为CSS标识符。这就是为什么classname = 'main elems'在上面的代码片段中变成main\ elems的原因。

6.4.1,高级特性:CSS自然模板等

与之前对JavaScript内联的解释一样,CSS内联也允许