用 thymeleaf 添加条件属性

Question

我有一个 thymeleaf 片段来创建输入字段，例如：

<div th:fragment="formField">
        <input th:type="${type}" th:errorclass="field_error" th:field="*{__${field}__}" th:placeholder="#{__${placeholder}__}" />
</div>

这个片段例如像这样使用：

<div th:replace="fragments :: formField (type='password', field='password', placeholder='resetPassword.form.password')">

现在根据片段的参数，是否应该将autofocus属性添加或不添加到输入字段。使用片段例如像这样应该添加自动对焦属性：

<div th:replace="fragments :: formField (type='password', field='password', placeholder='resetPassword.form.password', autofocus='autofocus')">

我找不到根据片段参数有条件地将自动对焦属性添加到输入标签的方法。我尝试使用 th:attr 但总是以语法错误告终。

有没有办法用 thymeleaf 有条件地创建 html 属性？

Answer 1

我认为这对于片段来说是一项过于复杂的任务。我用方言解决了这样的问题。看我的 question and the solution.

Answer 2

我想问题在于，如果您在片段中声明附加参数 - 您需要传递它。因此，您可以传递 autofocus 或空值 ('') 并使用 Thymeleaf 处理检查。

例如，您调用：

<div th:replace="fragments :: formField (type='password', field='password', 
     placeholder='resetPassword.form.password', autofocus='')">

然后处理：

<div th:fragment="formField">
    <input th:if="${!autofocus.isEmpty()}" th:type="${type}"
           th:errorclass="field_error" th:field="*{__${field}__}"
           th:placeholder="#{__${placeholder}__}" autofocus="true"/>
    <input th:if="${autofocus.isEmpty()}" th:type="${type}"
           th:errorclass="field_error" th:field="*{__${field}__}"
           th:placeholder="#{__${placeholder}__}"/>
</div>

或：

<div th:fragment="formField" th:switch="${autofocus}">
    <input th:case="'autofocus'" th:type="${type}"
           th:errorclass="field_error" th:field="*{__${field}__}"
           th:placeholder="#{__${placeholder}__}" autofocus="true"/>
    <input th:case="*" th:type="${type}" th:errorclass="field_error"
           th:field="*{__${field}__}"
           th:placeholder="#{__${placeholder}__}"/>
</div>

但我猜 James 评论使用 th:autofocus 将是最好的解决方案：

<div th:fragment="formField">
        <input th:type="${type}" th:errorclass="field_error" 
               th:field="*{__${field}__}" th:placeholder="#{__${placeholder}__}" 
               th:autofocus="${!autofocus.isEmpty()}" />
</div>

在所有情况下，您仍然需要传递 autofocus="autofocus" 或 autofocus="" 作为参数。

用 thymeleaf 添加条件属性

Add conditional attribute with thymeleaf

html

thymeleaf