五、 设置属性值

本章将说明在标记中设置(或修改)属性值的方法。

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属性使其以英语显示文本，但我们希望将其国际化。

然后 Importingth: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>

除了新的属性值之外，您还可以看到应用程序上下文名称已自动在/gtvg/subscribe中作为 URL 基础的前缀，如上一章所述。

但是，如果我们想一次设置多个属性怎么办？ 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}"/>

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

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

您还记得我们以前在home.html中放入的th:href吗？它们是完全一样的属性：

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

这类属性很多，每个属性都针对特定的 HTML5 属性：

5.3 一次设置多个值

有两个相当特殊的属性，分别称为th:alt-title和th:lang-xmllang，可用于将两个属性同时设置为相同的值。特别：

• th:alt-title将设置alt和title。
• 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}" />

…with this:

<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 类或* style *的片段，而不会覆盖现有的：

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

(不必担心th:each属性.这是一个* iterating 属性*，我们将在后面讨论.)

5.5 固定值布尔属性

HTML 具有布尔属性的概念，该属性没有值，并且首字母缩写为 1 表示值是“ 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}" />

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

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

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

所以像这样：

<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 Web 组件规范 的一部分)。例如，这可以用于th:block元素(或th-block)，这将在后面的部分中进行说明。

重要提示： 此语法是命名空间th:*的补充，它不会替代它。完全没有打算将来弃用命名空间的语法。