streamalism.org

1. Pregled

U ovom uputstvu pokazat ćemo kako pristupiti Spring MVC objektima u Thymeleaf prikazima koji sadrže JavaScript kôd. U našim ćemo primjerima koristiti Spring Boot i mehanizam predložaka Thymeleaf, ali ideja djeluje i za ostale mehanizme predložaka.

Opisat ćemo dva slučaja: kada je JavaScript kôd ugrađen ili interni u web stranicu koju generira mehanizam, i kada je izvan stranice - na primjer, u zasebnoj JavaScript datoteci.

2. Postavljanje

Pretpostavimo da smo već konfigurirali web aplikaciju Spring Boot koja koristi mehanizam predloška Thymeleaf. Inače bi vam ovi vodiči mogli biti korisni za početak:

• Bootstrap jednostavna aplikacija - o tome kako stvoriti Spring Boot aplikaciju od nule
• Spring MVC + Thymeleaf 3.0: Nove značajke - o tome kako koristiti sintaksu Thymeleaf

Nadalje, pretpostavimo da naša aplikacija ima kontroler koji odgovara krajnjoj točki /indeks koji prikazuje prikaz iz predloška s imenom index.html. Recimo, ovaj predložak može sadržavati ugrađeni ili vanjski JavaScript kôd script.js.

Cilj nam je omogućiti pristup Spring MVC parametrima s ugrađenog ili vanjskog JavaScript (JS) koda.

3. Pristupite parametrima

Prije svega, moramo stvoriti varijable modela koje želimo koristiti iz JS koda.

U Spring MVC-u postoje različiti načini za to. Iskoristimo ModelAndView pristup:

@RequestMapping ("/ index") public ModelAndView thymeleafView (model karte) {model.put ("broj", 1234); model.put ("message", "Hello from Spring MVC"); vrati novi ModelAndView ("timijanski list / indeks"); } 

Ostale mogućnosti možemo pronaći u našem vodiču Model, ModelMap, i ModelView u proljeće MVC.

4. Ugrađeni JS kod

Ugrađeni JS kôd nije ništa drugo nego dio index.html datoteka koja se nalazi unutar element. Tamo možemo sasvim izravno prenijeti varijable Spring MVC:

 var broj = [[$ {broj}]]; var poruka = ​​"[[$ {message}]]"; 

Mehanizam predloška Thymeleaf zamjenjuje svaki izraz vrijednošću koja je dostupna u opsegu trenutne izvedbe. To znači da mehanizam predloška pretvara gore spomenuti kod u sljedeći HTML kôd:

 var broj = 1234; var message = "Pozdrav iz proljetnog MVC-a!"; 

5. Vanjski JS kod

Recimo da je naš vanjski JS kôd uključen u index.html datoteku koristeći istu oznaku, u kojoj smo odredili src atribut:

Sada, ako želimo koristiti Spring MVC parametre iz script.js, trebali bismo:

1. definirajte JS varijable u ugrađenom JS kodu kao što smo to učinili u prethodnom odjeljku
2. pristupite ovim varijablama iz script.js datoteka

Imajte na umu da se vanjski JS kôd treba pozivati ​​nakon inicijalizacije varijabli ugrađenog JS koda.

To se može postići na dva načina: određivanjem redoslijeda izvođenja JS koda ili korištenjem asinkronog izvršavanja JS koda.

5.1. Navedite redoslijed izvršenja

To možemo učiniti deklariranjem vanjskog JS koda nakon ugrađenog u index.html:

 var broj = [[$ {broj}]]; var poruka = ​​"[[$ {message}]]"; 

5.2. Asinkrono izvršavanje koda

U ovom slučaju, redoslijed kojim deklariramo vanjski i ugrađeni JS kôd u index.html nije važno, ali trebali bismo postaviti kod iz script.js u tipičan omot učitan na stranici:

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

Unatoč jednostavnosti ovog koda, najčešća je praksa jQuery umjesto toga. Ovu smo knjižnicu uvrstili kao prvu element u index.html datoteka:

    ...  ... 

Sada možemo smjestiti JS kôd u sljedeće jQuery omot:

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

Ovim omotom možemo jamčiti da se JS kôd izvršava samo kad je cijeli sadržaj stranice, a time i sav drugi ugrađeni JS kôd, potpuno učitan.

6. Malo objašnjenja

U proljetnom MVC-u, mehanizam predloška Thymeleaf analizira samo datoteku predloška (index.html u našem slučaju) i pretvara ga u HTML datoteku. Ova bi pak datoteka mogla sadržavati reference na druge resurse koji su izvan dosega mehanizma predloška. Korisnikov preglednik raščlanjuje te resurse i prikazuje HTML prikaz.

Stoga mehanizam predloška te resurse ne raščlanjuje i varijable definirane u kontroleru možemo ubrizgati samo u ugrađeni JS kôd koji tada postaje dostupan za vanjski JS kôd.

7. Zaključak

U ovom uputstvu naučili smo kako pristupiti parametrima Spring MVC unutar JavaScript koda.

Kao i uvijek, cjeloviti primjeri koda nalaze se u našem GitHub spremištu.