1. Overview

1.概述

In this tutorial, we’re going to call JavaScript functions in a Thymeleaf template.

在本教程中，我们将在Thymeleaf模板中调用JavaScript>函数。

We’ll start by setting up our dependencies. Then, we’ll add our Spring controller and Thymeleaf template. Finally, we’ll showcase ways to call a JavaScript function based on its inputs.

我们将从设置我们的依赖性开始。然后，我们将添加我们的Spring控制器和Thymeleaf模板。最后，我们将展示如何根据输入来调用一个JavaScript函数。

2. Setup

2.设置

In order to use Thymeleaf in our application, let’s add the Thymeleaf Spring 5 dependency to our Maven configuration:

为了在我们的应用程序中使用Thymeleaf，让我们在Maven配置中添加Thymeleaf Spring 5依赖。

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring5</artifactId>
    <version>3.0.11.RELEASE</version>
</dependency>

Then, let’s add this to our Spring controller based on our Student model:

然后，让我们基于Student模型将其添加到我们的Spring控制器。

@Controller
public class FunctionCallController {

    @RequestMapping(value = "/function-call", method = RequestMethod.GET)
    public String getExampleHTML(Model model) {
        model.addAttribute("totalStudents", StudentUtils.buildStudents().size());
        model.addAttribute("student", StudentUtils.buildStudents().get(0));
        return "functionCall.html";
    }
}

Finally, we add these two JavaScript functions to our functionCall.html template under src/main/webapp/WEB-INF/views:

最后，我们将这两个JavaScript函数添加到我们的functionCall.html模板下src/main/webapp/WEB-INF/views。

<script  th:inline="javascript">
    function greetWorld() {
        alert("hello world")
    }

    function salute(name) {
        alert("hello: " + name)
    }
</script>

We’ll use those two functions to illustrate our examples in the next section below.

我们将使用这两个函数来说明我们在下面一节中的例子。

If there’s any trouble, we can always check how to add JavaScript to Thymeleaf.

如果有任何麻烦，我们可以随时查看如何向Thymeleaf添加JavaScript。

3. Calling JavaScript Functions Inside Thymeleaf

3.在Thymeleaf内部调用JavaScript函数

3.1. Using Functions with No Inputon

3.1.使用没有输入的函数

Here’s how we’d call our greetWorld function above :

下面是我们如何调用上面的greetWorld函数。

<button th:onclick="greetWorld()">using no variable</button>

It works for any custom or built-in JavaScript function.

它适用于任何自定义或内置的JavaScript函数。

3.2. Using Functions with Static Input

3.2.使用带有静态输入的函数

If we don’t need any dynamic variable in the JavaScript function, this is how to call it:

如果我们在JavaScript函数中不需要任何动态变量，就可以这样调用它。

<button th:onclick="'alert(\'static variable used here.\');'">using static variable</button>

This escapes the single quotes and requires no SpringEL.

这将转义单引号，不需要SpringEL。

3.3. Using Functions with Dynamic Input

3.3.使用有动态输入的函数

There are four manners to call a JavaScript function with variables.

有四种方式可以用变量来调用一个JavaScript函数。

The first way to insert a variable is to use inline variables:

插入变量的第一种方法是使用内联变量。

<button th:onclick="'alert(\'There are exactly '  + ${totalStudents} +  ' students\');'">using inline dynamic variable</button>

Another option is by calling the javascript:function:

另一个选择是通过调用javascript:function。

<button th:onclick="'javascript:alert(\'There are exactly ' + ${totalStudents} + ' students\');'">using javascript:function</button>

The third way is to use data attributes:

第三种方式是使用data attributes。

<button th:data-name="${student.name}" th:onclick="salute(this.getAttribute('data-name'))">using data attribute</button>

This method comes in handy when calling JavaScript events, like onClick and onLoad.

在调用JavaScript事件时，这个方法很方便，比如onClick和onLoad。。

Finally, we can call our salute function with double-square-brackets syntax:

最后，我们可以用双方括号的语法调用我们的salute函数。

<button th:onclick="salute([[${student.name}]])">using double brackets</button>

Expressions between double square–brackets are considered inlined expressions in Thymeleaf. That’s why we can use any kind of expression that would also be valid in a th:text attribute.

双方括号之间的表达式在Thymeleaf中被视为内联表达式。这就是为什么我们可以使用任何一种在th:text属性中也有效的表达式。

4. Conclusion

4.总结

In this tutorial, we learned how to call JavaScript functions in a Thymeleaf template. We started by setting up our dependencies. Then, we constructed our controller and template. Finally, we explored ways to call any JavaScript function inside Thymeleaf.

在本教程中，我们学习了如何在Thymeleaf模板中调用JavaScript函数。我们首先设置了我们的依赖项。然后，我们构建了我们的控制器和模板。最后，我们探索了在Thymeleaf中调用任何JavaScript函数的方法。

As always, the code is available over on GitHub.

像往常一样，代码可在GitHub上获得。