设置属性值


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

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应用程序的模板。首先,action我们表单中的属性静态链接到模板文件本身,因此没有地方可以进行有用的URL重写。其次,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>

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

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

除了新的属性值之外,您还可以看到applicacion上下文名称已自动添加到URL基础中/gtvg/subscribe,如前一章所述。

但是如果我们想一次设置多个属性呢?XML规则不允许您在标记中设置两次属性,因此th: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)。

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

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

这看起来好多了!让我们尝试action对form标记中的属性执行相同的操作:

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

你还记得th:href我们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 will set alt and title.
  • th:lang-xmllang will set lang and 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.4Appending and prepending

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固定值布尔属性

HTML具有布尔属性的概念,没有值的属性和值的前提意味着值为“true”。在XHTML中,这些属性只占用1个值,这本身就是一个值。

例如,checked:

<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 Setting the value of any attribute (default attribute processor)

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

所以类似于:

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

将导致:

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

5.7Support for HTML5-friendly attribute and element names

也可以使用完全不同的语法以更加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 Web组件规范的一部分)。例如,这可以用于th:block元素(或者也可以th-block),这将在后面的部分中解释。

重要提示:此语法是命名空间语法的补充th:* ,它不会替换它。完全没有意图在将来弃用命名空间语法。