Рубрики
Без рубрики

Доступ к объектам модели Spring MVC в JavaScript

Узнайте, как получить доступ к объектам Spring MVC в представлениях JSP, содержащих код JavaScript.

Автор оригинала: Andrew Shcherbakov.

1. Обзор

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

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

2. Настройка

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

  • Bootstrap a Simple Application – о том, как создать приложение Spring Boot с нуля
  • Spring MVC + Thymeleaf 3.0: Новые функции – о том, как использовать синтаксис Thymeleaf

Кроме того, предположим, что наше приложение имеет контроллер, соответствующий конечной точке /index , который отображает представление из шаблона с именем index.html . Этот шаблон может включать встроенный или внешний код JavaScript, например script.js .

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

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

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

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

@RequestMapping("/index")
public ModelAndView thymeleafView(Map model) {
    model.put("number", 1234);
    model.put("message", "Hello from Spring MVC");
    return new ModelAndView("thymeleaf/index");
}

Мы можем найти другие возможности в нашем учебнике по модели, карте модели и представлению модели в Spring MVC .

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

Встроенный JS-код-это не что иное, как часть index.html файл, который находится внутри элемента

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

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

Предположим, что наш внешний JS-код включен в index.html файл с использованием того же тега

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

  1. определите переменные JS во встроенном коде JS, как мы это делали в предыдущем разделе
  2. доступ к этим переменным осуществляется из script.js файл

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

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

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

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

5.2. Асинхронное Выполнение Кода

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

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

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




    
        
        ...
    
 ...

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

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

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

6. Небольшое объяснение

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

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

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

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

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

Читайте ещё по теме: