Достъп до Spring MVC Model Objects в JavaScript

1. Общ преглед

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

Ще опишем два случая: когато JavaScript кодът е вграден или вътрешен в уеб страницата, генерирана от двигателя, и когато е външен за страницата - например в отделен JavaScript файл.

2. Настройка

Нека приемем, че вече сме конфигурирали уеб приложение Spring Boot, което използва механизъм за шаблони на Thymeleaf. В противен случай може да намерите тези уроци полезни за стартиране:

  • Bootstrap просто приложение - за това как да създадете Spring Boot приложение от нулата
  • Spring MVC + Thymeleaf 3.0: Нови функции - как да използвате синтаксиса на Thymeleaf

Освен това, нека предположим, че нашето приложение има контролер, съответстващ на крайна точка / индекс, който изобразява изглед от шаблон с име 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"); } 

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

4. Вграден JS код

Вграденият JS код не е нищо друго освен част от файла index.html, който се намира вътре велемент. Можем да предаваме променливи Spring MVC там съвсем просто:

 var number = [[${number}]]; var message = "[[${message}]]"; 

Шаблонният механизъм на Thymeleaf замества всеки израз със стойност, която е налична в обхвата на текущото изпълнение. Това означава, че механизмът на шаблони преобразува споменатия по-горе код в следния HTML код:

 var number = 1234; var message = "Hello from Spring MVC!"; 

5. Външен JS код

Да кажем, че нашият външен JS код е включен във файла index.html, използвайки същиятаг, в който указваме атрибута src :

Сега, ако искаме да използваме параметрите Spring MVC от script.js , трябва:

  1. дефинирайте JS променливи във вградения JS код, както направихме в предишния раздел
  2. достъп до тези променливи от файла script.js

Имайте предвид, че външният JS код трябва да бъде извикан след инициализиране на променливите на вградения JS код .

Това може да се постигне по два начина: чрез определяне на реда на изпълнение на JS код или чрез използване на асинхронно изпълнение на JS код.

5.1. Посочете реда за изпълнение

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

 var number = [[${number}]]; var message = "[[${message}]]";  

5.2. Асинхронно изпълнение на код

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

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

Въпреки простотата на този код, най-често срещаната практика е вместо това да се използва jQuery . Включваме тази библиотека като първатаелемент във файла index.html :

    ...  ... 

Сега можем да поставим JS кода в следната обвивка на jQuery :

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

С тази обвивка можем да гарантираме, че JS кодът се изпълнява само когато цялото съдържание на страницата и следователно всички останали вградени JS кодове са напълно заредени.

6. Малко обяснение

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

Следователно тези ресурси не се анализират от механизма на шаблона и ние можем да инжектираме променливи, дефинирани в контролера, само във вградения JS код, който след това става достъпен за външния JS код.

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

В този урок научихме как да осъществим достъп до параметрите на Spring MVC вътре в JavaScript код.

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