1. Overview
1.概述
In this tutorial, we’re going to show how to access Spring MVC objects in Thymeleaf views that contain JavaScript code. We’ll use Spring Boot and the Thymeleaf template engine in our examples, but the idea works for other template engines as well.
在本教程中，我们将展示如何在包含JavaScript代码的Thymeleaf视图中访问Spring MVC对象。我们将在例子中使用Spring Boot和Thymeleaf模板引擎，但这个想法也适用于其他模板引擎。
We’re going to describe two cases: when JavaScript code is embedded or internal to the web page generated by the engine, and when it is external to the page – for example, in a separate JavaScript file.
我们将描述两种情况：当JavaScript代码被嵌入或内部由引擎生成的网页时，以及当它在网页的外部–例如，在一个单独的JavaScript文件中。
2. Setup
2.设置
Let’s assume that we’ve already configured a Spring Boot web application that uses Thymeleaf template engine. Otherwise, you might find these tutorials useful to start:
让我们假设我们已经配置了一个使用Thymeleaf模板引擎的Spring Boot网络应用。否则，你可能会发现这些教程对开始很有用。
- Bootstrap a Simple Application – on how to create a Spring Boot application from scratch
- Spring MVC + Thymeleaf 3.0: New Features – on how to use Thymeleaf syntax
Furthermore, let’s suppose that our application has a controller corresponding to an endpoint /index that renders a view from a template named index.html. This template might include an embedded or an external JavaScript code, say script.js.
此外，我们假设我们的应用程序有一个控制器，对应于一个端点/index，它从一个名为index.html的模板渲染一个视图。这个模板可能包括一个嵌入式或外部的JavaScript代码，例如script.js。
Our goal is to be able to access Spring MVC parameters from either embedded or external JavaScript (JS) code.
我们的目标是能够从嵌入式或外部JavaScript（JS）代码中访问Spring MVC参数。
3. Access the Parameters
3.访问参数
First of all, we need to create the model variables that we want to use from the JS code.
首先，我们需要创建我们想从JS代码中使用的模型变量。
In Spring MVC, there are various ways of doing this. Let’s use the ModelAndView approach:
在Spring MVC中，有多种方法可以做到这一点。让我们使用ModelAndView方法。
@RequestMapping("/index")
public ModelAndView thymeleafView(Map<String, Object> model) {
model.put("number", 1234);
model.put("message", "Hello from Spring MVC");
return new ModelAndView("thymeleaf/index");
}
We can find other possibilities in our tutorial on Model, ModelMap, and ModelView in Spring MVC.
我们可以在我们的Model、ModelMap和ModelView的Spring MVC教程中找到其他可能性。
4. Embedded JS Code
4.嵌入式JS代码
Embedded JS code is nothing but a part of the index.html file that is located inside the <script> element. We can pass Spring MVC variables there quite straightforwardly:
嵌入式JS代码只不过是 index.html文件的一部分，位于<script>元素内。我们可以很直接地在那里传递Spring MVC的变量。
<script>
var number = [[${number}]];
var message = "[[${message}]]";
</script>Thymeleaf template engine replaces every expression by a value that is available in the scope of the current execution. This means that the template engine transforms the code mentioned above into the following HTML code:
Thymeleaf模板引擎将每个表达式替换为当前执行范围内的可用值。这意味着模板引擎将上述代码转换为以下HTML代码。
<script>
var number = 1234;
var message = "Hello from Spring MVC!";
</script>5. External JS Code
5.外部JS代码
Let’s say that our external JS code is included in the index.html file using the same <script> tag, in which we specify the src attribute:
假设我们的外部JS代码被包含在 index.html文件中，使用同样的<script>标签，其中我们指定了src属性。
<script src="/js/script.js"></script>Now, if we want to use the Spring MVC parameters from script.js, we should:
现在，如果我们想从script.js中使用Spring MVC参数，我们应该这样做。
- define JS variables in embedded JS code as we did in the previous section
- access these variables from the script.js file
Note that the external JS code should be invoked after the initialization of the variables of the embedded JS code.
注意，外部JS代码应在嵌入式JS代码的变量初始化后调用。
This can be achieved in two ways: by specifying the order of a JS code execution or by using an asynchronous JS code execution.
这可以通过两种方式实现：通过指定JS代码执行的顺序或使用异步JS代码执行。
5.1. Specify the Order of Execution
5.1.指定执行的顺序
We can do this by declaring the external JS code after the embedded one in index.html:
我们可以通过在index.html中嵌入的JS代码之后声明外部JS代码来做到这一点。
<script>
var number = [[${number}]];
var message = "[[${message}]]";
</script>
<script src="/js/script.js"></script>5.2. Asynchronous Code Execution
5.2.异步代码执行
In this case, the order in which we declare the external and embedded JS code in the index.html is of no importance, but we should place the code from script.js into a typical on-page-loaded wrapper:
在这种情况下，我们在index.html中声明外部和嵌入JS代码的顺序并不重要，但我们应该将script.js中的代码放入一个典型的on-pageloaded包装器。
window.onload = function() {
// JS code
};Despite the simplicity of this code, the most common practice is to use jQuery instead. We include this library as the first <script> element in the index.html file:
尽管这段代码很简单，但最常见的做法是使用jQuery来代替。我们把这个库作为<script>文件的第一个index.html元素。
<!DOCTYPE html>
<html>
<head>
<script src="/js/jquery.js"></script>
...
</head>
...
</html>Now, we may place the JS code inside the following jQuery wrapper:
现在，我们可以将JS代码放在以下jQuery包装器内。
$(function () {
// JS code
});With this wrapper, we can guarantee that the JS code is executed only when the whole page content, and hence all other embedded JS code, is completely loaded.
有了这个包装器，我们可以保证只有在整个页面内容，也就是所有其他嵌入的JS代码完全加载完毕后，才会执行JS代码。
6. A Bit of Explanation
6.解释一下
In Spring MVC, the Thymeleaf template engine parses only the template file (index.html in our case) and converts it into an HTML file. This file, in its turn, might include references to other resources that are out of the scope of the template engine. It’s the user’s browser that parses those resources and renders the HTML view.
在Spring MVC中，Thymeleaf模板引擎只解析模板文件（在我们的例子中是index.html）并将其转换为HTML文件。这个文件又可能包括对模板引擎范围之外的其他资源的引用。是用户的浏览器解析了这些资源并渲染了HTML视图。
Therefore, those resources are not parsed by the template engine, and we may inject variables defined in the controller only into the embedded JS code that then becomes available for the external JS code.
因此，这些资源不被模板引擎解析，我们可以将控制器中定义的变量只注入到嵌入式JS代码中，然后成为外部JS代码的可用资源。
7. Conclusion
7.结语
In this tutorial, we’ve learned how to access Spring MVC parameters inside a JavaScript code.
在本教程中，我们已经学会了如何在JavaScript代码中访问Spring MVC参数。
As always, the complete code examples are in our GitHub repository.
一如既往，完整的代码示例在我们的GitHub资源库中。