设置属性值

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

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:* ，它不会替换它。完全没有意图在将来弃用命名空间语法。