用Thymeleaf调用Javascript函数

Question

我需要在thymeleaf模板上调用一个javascript函数,如下所示:

情况1:

<select th:onclick="${'function1('a')'}">

但在这种情况下,百里香叶不起作用..一些研究前(包括stackoverflow)我得到以下"解决方案":

案例2:

<select th:onclick="${'function1(''a'')'}">

案例3:

<select th:onclick="${'function1(\'a\')'}">

案例4:

<select th:onclick="${'function1(\''+'a'+'\')'}">

但是在所有情况下我都会得到同样的错误:"...评估SpringEL表达式的异常......"

我的问题是关于javascript调用,我需要在js函数中调用一些参数$ {var}.我怎么解决这个问题？

谢谢

Answer 1

如果在JS函数调用中不需要任何动态变量,那么这是如何做到的:

th:onclick="'alert(\'a\');'"

这简单地逃避了单引号并且不需要SpringEL(当然,在这种情况下你可以免除thymeleaf属性,只需使用简单的onclick).

要将变量插入其中:

th:onclick="'alert(\'' + ${myVar} + '\');'"

使用警报功能允许我尝试并证明它有效.希望有所帮助.

Answer 2

据我所知，您有两种可能的做法：

使用双括号

<body th:onload="showToast([[${toast}]])">
...
</body>

然后JS函数是这样的

function showToast(toast) {
    M.toast({html: toast});
}

使用数据属性

<body th:data-toast="${toast}" th:onload="showToast()">
...
</body>

以及适当的JS函数

function showToast() {
    var toast = document.querySelectorAll('body')[0].getAttribute('data-toast');
    M.toast({html: toast});
}

Answer 3

您需要按如下所述调用javascript函数。

th:onclick="'javascript:function1(\''+ ${a} +'\');'"

我认为这可以为您提供帮助。