Thymeleaf 设置属性值

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

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" />

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属性：

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}" />

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

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}" />

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

6.  Setting the value of any attribute (default attribute processor)

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

所以类似于：

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

将导致：

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

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