开发学院

您的位置:首页>教程>正文

教程正文

Thymeleaf 3.0教程:5 设置属性值

  本章将解释我们在标记中设置(或修改)属性值的方式。

5.1 设置任何属性值

  假设我们的网站发布了一份时事通讯,我们希望我们的用户能够订阅它,所以我们创建了一个/WEB-INF/templates/subscribe.html模板,其格式为:

<form action="subscribe.html">
  <fieldset>
    <input type="text" name="email" />
    <input type="submit" value="Subscribe!" />
  </fieldset>
</form>

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

  然后输入th:attr属性及其更改标签属性值的能力:

<form action="subscribe.html" th:attr="action=@{/subscribe}">
  <fieldset>
    <input type="text" name="email" />
    <input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>
  </fieldset>
</form>

  这个概念非常简单:attr只需要一个表达式给属性赋值。创建了相应的控制器和消息文件后,处理该文件的结果将是:

<form action="/gtvg/subscribe">
  <fieldset>
    <input type="text" name="email" />
    <input type="submit" value="¡Suscríbe!"/>
  </fieldset>
</form>

  除了新的属性值之外,您还可以看到应用程序上下文名称已经自动添加到/gtvg/subscribe中的网址基础前面,如前一章所述。

  但是如果我们想一次设置多个属性呢?XML规则不允许您在标签中设置两次属性,因此attr将采用逗号分隔的分配列表,例如:

<img src="../../images/gtvglogo.png" 
     th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />

  给定所需的消息文件,这将输出:

<img src="/gtgv/images/gtvglogo.png" title="Logo de Good Thymes" alt="Logo de Good Thymes" />

5.2 将值设置为特定属性

  到目前为止,你可能会想:

<input type="submit" value="Subscribe!" th:attr="value=#{subscribe.submit}"/>

  这是一个相当丑陋的标记。在属性值中指定赋值可能非常实用,但是如果必须一直这样做,这不是创建模板的最优雅的方式。

  Thymeleaf也同意你的观点,这就是为什么th:attr很少在模板中使用。通常,您将使用其他th:*属性,其任务是设置特定的标签属性(而不仅仅是像th:attr这样的任何属性)。

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

<input type="submit" value="Subscribe!" th:value="#{subscribe.submit}"/>

  这看起来好多了!让我们尝试对表单标签中的action属性做同样的事情:

<form action="subscribe.html" th:action="@{/subscribe}">

  你还记得我们以前放在home.html的那些吗?它们是完全相同的属性:

<li><a href="product/list.html" th:href="@{/product/list}">Product List</a></li>

  有很多这样的属性,每一个都是针对一个特定的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

5.3 一次设置多个值

  有两个相当特殊的属性叫做th:alt-title和th:lang-xmllang,它们可以用来同时将两个属性设置为相同的值。具体来说:

th:alt-title 设置alt和title顺序ing.
th:lang-xmllang 设置lang和xml:lang属性

  对于我们的GTVG主页,这将允许我们替换它:

<img src="../../images/gtvglogo.png" 
     th:attr="src=@{/images/gtvglogo.png},title=#{logo},alt=#{logo}" />

  或者这个,相当于:

<img src="../../images/gtvglogo.png" 
     th:src="@{/images/gtvglogo.png}" th:title="#{logo}" th:alt="#{logo}" />

  这样:

<img src="../../images/gtvglogo.png" 
     th:src="@{/images/gtvglogo.png}" th:alt-title="#{logo}" />

5.4 追加和前置

  Thymeleaf还提供th:attrappend和th:attrprepend属性,它们将评估结果附加(后缀)或前置(前缀)到现有属性值。

  例如,您可能希望将要添加(未设置,只是添加)到某个按钮的CSS类的名称存储在上下文变量中,因为要使用的特定CSS类将取决于用户以前做过的事情:

<input type="button" value="Do it!" class="btn" th:attrappend="class=${' ' + cssStyle}" />

  如果您在处理该模板时将cssStyle变量设置为“warning”,您将获得:

<input type="button" value="Do it!" class="btn warning" />

  标准方言中还有两个特定的附加属性:th:classappend和th:styleappend属性,它们用于在不覆盖现有属性的情况下向元素添加CSS类或样式片段:

<tr th:each="prod : ${prods}" class="row" th:classappend="${prodStat.odd}? 'odd'">

  不要担心th:each属性。这是一个迭代属性,我们稍后将讨论它

5.5 固定值布尔属性

  超文本标记语言有布尔属性的概念,没有值的属性和一个值的预定义意味着值是true”。在XHTML中,这些属性只取1个值,这就是它本身。

  例如,选中:

<input type="checkbox" name="option2" checked /> <!-- HTML -->
<input type="checkbox" name="option1" checked="checked" /> <!-- XHTML -->

  标准方言包括允许您通过评估条件来设置这些属性的属性,因此如果评估为true,该属性将被设置为其固定值,如果评估为false,则不会设置该属性:

<input type="checkbox" name="active" th:checked="${user.active}" />

  标准方言中存在以下固定值布尔属性:

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

5.6 设置任何属性值(默认属性处理器)

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

  所以类似于:

<span th:whatever="${user.name}">...</span>

  将导致:

<span whatever="John Apricot">...</span>

5.7 支持HTML5友好的属性和元素名称

  也可以使用完全不同的语法,以一种更加HTML5友好的方式将处理器应用到您的模板中。

<table>
    <tr data-th-each="user : ${users}">
        <td data-th-text="${user.login}">...</td>
        <td data-th-text="${user.name}">...</td>
    </tr>
</table>

  data-{prefix}-{name}语法是在HTML5中编写自定义属性的标准方法,不需要开发人员使用任何像th:*。Thymeleaf使该语法自动适用于您的所有方言(不仅仅是标准方言)。

  还有一种语法可以指定自定义标记:{prefix}-{name},它遵循W3C自定义元素规范(W3C网络组件规范的一部分)。例如,这可以用于th:block元素(或者也可以用于th-block),这将在后面的部分进行解释。

  重要提示:这个语法是对命名空间th *语法的一个补充,它不能代替它。将来根本没有打算反对命名空间语法。