«1. Обзор

В этом руководстве мы собираемся показать, как получить доступ к объектам Spring MVC в представлениях Thymeleaf, которые содержат код JavaScript. В наших примерах мы будем использовать Spring Boot и механизм шаблонов Thymeleaf, но эта идея работает и для других механизмов шаблонов.

Мы собираемся описать два случая: когда код JavaScript встроен или встроен в веб-страницу, сгенерированную движком, и когда он является внешним по отношению к странице — например, в отдельном файле JavaScript.

2. Настройка

Предположим, мы уже настроили веб-приложение Spring Boot, использующее механизм шаблонов Thymeleaf. В противном случае эти руководства могут оказаться полезными для начала:

    Начальная загрузка простого приложения — о том, как создать приложение Spring Boot с нуля Spring MVC + Thymeleaf 3.0: новые функции — о том, как использовать синтаксис Thymeleaf ~~ ~ Кроме того, давайте предположим, что наше приложение имеет контроллер, соответствующий конечной точке /index, который отображает представление из шаблона с именем index.html. Этот шаблон может включать встроенный или внешний код JavaScript, например script.js.

Наша цель — получить доступ к параметрам Spring MVC как из встроенного, так и из внешнего кода JavaScript (JS).

3. Доступ к параметрам

Прежде всего, нам нужно создать переменные модели, которые мы хотим использовать, из кода JS.

В Spring MVC это можно сделать различными способами. Давайте воспользуемся подходом ModelAndView:

Мы можем найти другие возможности в нашем руководстве по Model, ModelMap и ModelView в Spring MVC. 

@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");
}

4. Встроенный JS-код

Встроенный JS-код — это не что иное, как часть файла index.html, расположенного внутри элемента \u003cscript\u003e. Мы можем передать туда переменные Spring MVC довольно просто:

Механизм шаблонов Thymeleaf заменяет каждое выражение значением, доступным в области текущего выполнения. Это означает, что механизм шаблонов преобразует упомянутый выше код в следующий HTML-код: 

<script>
    var number = [[${number}]];
    var message = "[[${message}]]";
</script>

5. Внешний JS-код 

<script>
    var number = 1234;
    var message = "Hello from Spring MVC!";
</script>

Предположим, что наш внешний JS-код включен в файл index.html с использованием того же \u003c script\u003e, в котором мы указываем атрибут src:

Теперь, если мы хотим использовать параметры Spring MVC из script.js, мы должны: 

<script src="/js/script.js"></script>

Обратите внимание, что внешний код JS должен вызываться после инициализация переменных встроенного кода JS.

  1. define JS variables in embedded JS code as we did in the previous section
  2. access these variables from the script.js file

Этого можно добиться двумя способами: указав порядок выполнения кода JS или используя асинхронное выполнение кода JS.

5.1. Укажите порядок выполнения

Мы можем сделать это, объявив внешний код JS после встроенного в index.html:

5.2. Асинхронное выполнение кода 

<script>
    var number = [[${number}]];
    var message = "[[${message}]]";
</script>
<script src="/js/script.js"></script>

В этом случае порядок, в котором мы объявляем внешний и встроенный код JS в index.html, не имеет значения, но мы должны поместить код из script.js в типичный загружаемый на странице код. wrapper:

Несмотря на простоту этого кода, наиболее распространенной практикой является использование вместо него jQuery. Мы включаем эту библиотеку в качестве первого элемента \u003cscript\u003e в файл index.html: 

window.onload = function() {
    // JS code
};

Теперь мы можем поместить код JS в следующую оболочку jQuery: 

<!DOCTYPE html>
<html>
    <head>
        <script src="/js/jquery.js"></script>
        ...
    </head>
 ...
</html>

С помощью этой оболочки мы можем гарантировать, что код JS выполняется только тогда, когда все содержимое страницы и, следовательно, весь другой встроенный код JS полностью загружены. 

$(function () {
    // JS code
});

6. Немного пояснений

В Spring MVC механизм шаблонов Thymeleaf анализирует только файл шаблона (index.html в нашем случае) и преобразует его в файл HTML. Этот файл, в свою очередь, может содержать ссылки на другие ресурсы, выходящие за рамки механизма шаблонов. Браузер пользователя анализирует эти ресурсы и отображает HTML-представление.

Таким образом, эти ресурсы не анализируются механизмом шаблонов, и мы можем внедрять переменные, определенные в контроллере, только во встроенный код JS, который затем становится доступным для внешнего кода JS.

7. Заключение

В этом руководстве мы узнали, как получить доступ к параметрам Spring MVC внутри кода JavaScript.

«Как всегда, полные примеры кода находятся в нашем репозитории GitHub.

«