Thymeleaf在将JavaScript文字传递给th： onClick时找不到我的变量

Question

我正在尝试在我的Thymeleaf模板上使用JavaScript函数，该模板使用Thymeleaf变量，如下所示：

 <div th:object="${orderBy}">
        <form method="get" th:action="@{/}">
            <fieldset id="ordenacao">
                <legend>Ordenar</legend>
                <select th:name="orderBy">
                    <option th:each="orderBy : ${T(br.com.teste.segware.util.OrderTypes).values()}"
                    th:value="${orderBy}" th:text="${orderBy.displayValue}" ></option>
                </select> <br/> <br/>
                <input id="orderButton" th:onclick="'javascript:enableBtn(\'' + ${orderBy.displayValue} + '\');'"
                type="submit" value="Ordenar">
            </fieldset>
        </form>
    </div> 

变量是此枚举中的一个选项（使用Lombok生成getter）：

@Getter
public enum OrderTypes {
    SELECIONE("Selecione..."),
    RECENTES("Recentes Primeiro"),
    ANTIGAS("Antigas Primeiro"),
    MAISUP("Mais Upvotes"),
    MENOSUP("Menos Upvotes");

    private final String displayValue;

    private OrderTypes(String displayValue) {
        this.displayValue = displayValue;
    }

}

带有th的菜单中的选项：每个选项都以下拉选择/选项菜单的形式正确显示在渲染的HTML中。

但是，当我使用作为te方法的JavaScript参数呈现的同一个变量时，我得到了以下错误：

原因：org.thymeleaf.standard.expression.TemplateProcessingException：异常评估SpringEL表达式：“orderBxpression.executeValue”（模板：“index”-第43行，第36行）在xpression.java:112SPELVariableExpressionEorg.thymeleaf.standard.expression.（SPELVariableExpressionExpression.execute）在xpression.java:89VariableEorg.thymeleaf.standard.expression.VariableExpression（VariableExpression.execute）在org.thymeleaf.standard.expression.SimpleExpression.executeSimple（SimpleExpression.java:66）在xpression.java:112Eorg.thymeleaf.standard.expression.（Expression.java:109）在org.thymeleaf.standard.expression.AdditionExpression.execute加法（AdditionExpression.java:96）在org.thymeleaf.standard.expression.ComplexExpression.executeComplex（ComplexExpression.java:62）在org.thymeleaf.exceptions.Ey.display（Eorg.thymeleaf.spring5.expression.）在valuator.evaluateAdditionEvaluator.java:290加法（AdditionEorg.thymeleaf.standard.expression.）在xpression.executeComplexExpression.java:166Complex（Eorg.thymeleaf.standard.expression.）在xpression.executeExpress.执行（Expression. java： 138）在org. thymeleaf. Process。InlinedOutputExpressionMarkupHandler. handleStandard aloneElementEnd（InlinedOutputExpressionMarkupHandler. java： 104）在org. attoparser。HtmlVoidElement. handleOpenElementEnd（HtmlVoidElement. java： 92）在org. attoparser。HtmlMarkupHandler. handleOpenElementEnd（HtmlMarkupHandler. java： 297）在org. attoparser。MarkupEventProcessorHandler. handleOpenElementEnd（MarkupEventProcessorHandler. java： 402）在org. attoparser。ParsingElementMarkupUtil. parseOpenElement（ParsingElementMarkupUtil. java： 159）在org. attoparser。MarkupParser. parseDocument（MarkupParser. java： 301）...50更多原因

这是JS函数（非常简单）：

function enableBtn(select)
{
    if(select == 'SELECIONE' || select == 'Selecione...') 
    {
        document.getElementById('orderButton').disabled = true;
    };
}

那么，如果相同的参数在视图中正确呈现，为什么在th:onclick中会说找不到来自对象的变量？

以下是我迄今为止尝试过的：

th:onclick="'javascript:enableBtn(\'' + ${orderBy.displayValue} + '\');'"


th:onclick="|enableBtn('${orderBy.displayValue}');|"


th:data-enable='|{${orderBy.displayValue}}|' th:onclick="'enableBtn('enable')';'"

拜托这玩意儿怎么用？先谢谢你

Answer 1

Basic JS，用于在选择更改时禁用/启用按钮。

 function enableBtn(select){
    var btn = document.getElementById('orderButton');
    if(select == 'SELECIONE' ){
        btn.disabled = true;
    } else {
        btn.disabled = false;
    }
 }

禁用页面加载按钮。当选择更改时，选中以启用按钮

<select th:name="orderBy" th:onChange="enableBtn(this.value)">
   <option th:each="orderBy : ${T( com.example.demo.OrderTypes).values()}"
           th:value="${orderBy}" th:text="${orderBy.displayValue}" ></option>
</select> <br/> <br/>
<input id="orderButton" type="submit" value="Ordenar" disabled>