streamalism.org

1. Oversikt

I denne veiledningen skal vi vise hvordan du får tilgang til Spring MVC-objekter i Thymeleaf-visninger som inneholder JavaScript-kode. Vi bruker Spring Boot og Thymeleaf malmotoren i eksemplene våre, men ideen fungerer også for andre malmotorer.

Vi skal beskrive to tilfeller: når JavaScript-kode er innebygd eller intern på websiden som genereres av motoren, og når den er ekstern til siden - for eksempel i en separat JavaScript-fil.

2. Oppsett

La oss anta at vi allerede har konfigurert et Spring Boot-nettprogram som bruker Thymeleaf malmotor. Ellers kan du finne disse veiledningene nyttige å starte:

• Bootstrap a Simple Application - om hvordan du oppretter en Spring Boot-applikasjon fra bunnen av
• Spring MVC + Thymeleaf 3.0: Nye funksjoner - om hvordan du bruker Thymeleaf-syntaks

Videre, la oss anta at applikasjonen vår har en kontroller som tilsvarer et endepunkt / indeks som gjengir en visning fra en mal som heter index.html. Denne malen kan inneholde en innebygd eller en ekstern JavaScript-kode, si script.js.

Målet vårt er å kunne få tilgang til Spring MVC-parametere fra enten innebygd eller ekstern JavaScript-kode (JS).

3. Få tilgang til parameterne

Først og fremst må vi lage modellvariablene som vi vil bruke fra JS-koden.

I vår MVC er det forskjellige måter å gjøre dette på. La oss bruke ModelAndView nærme seg:

@RequestMapping ("/ index") offentlig ModelAndView thymeleafView (Kartmodell) {model.put ("nummer", 1234); model.put ("melding", "Hello from Spring MVC"); returner ny ModelAndView ("thymeleaf / index"); } 

Vi kan finne andre muligheter i veiledningen vår Modell, ModelMap, og ModelView i vår MVC.

4. Innebygd JS-kode

Innebygd JS-kode er bare en del av index.html filen som ligger inne i element. Vi kan sende Spring MVC-variabler der ganske enkelt:

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

Thymeleaf malmotor erstatter hvert uttrykk med en verdi som er tilgjengelig i omfanget av den nåværende kjøringen. Dette betyr at malmotoren forvandler koden nevnt ovenfor til følgende HTML-kode:

 var nummer = 1234; var message = "Hei fra våren MVC!"; 

5. Ekstern JS-kode

La oss si at vår eksterne JS-kode er inkludert i index.html fil ved hjelp av det samme , der vi spesifiserer src Egenskap:

Nå, hvis vi vil bruke Spring MVC-parametrene fra script.js, vi burde:

1. definere JS-variabler i innebygd JS-kode som vi gjorde i forrige avsnitt
2. få tilgang til disse variablene fra script.js fil

Merk at den eksterne JS-koden skal påkalles etter initialiseringen av variablene til den innebygde JS-koden.

Dette kan oppnås på to måter: ved å spesifisere rekkefølgen på en JS-kodeutførelse eller ved å bruke en asynkron JS-kodeutførelse.

5.1. Spesifiser rekkefølgen for utførelsen

Vi kan gjøre dette ved å erklære den eksterne JS-koden etter den innebygde i index.html:

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

5.2. Asynkron kodeutførelse

I dette tilfellet er rekkefølgen vi erklærer den eksterne og innebygde JS-koden i index.html er ikke viktig, men vi bør plassere koden fra script.js inn i en typisk innpakning på siden:

window.onload = funksjon () {// JS-kode};

Til tross for enkelheten i denne koden, er den vanligste fremgangsmåten å bruke jQuery i stedet. Vi inkluderer dette biblioteket som det første element i index.html fil:

    ...  ... 

Nå kan vi plassere JS-koden i det følgende jQuery innpakning:

$ (funksjon () {// JS-kode});

Med denne innpakningen kan vi garantere at JS-koden bare kjøres når hele sideinnholdet, og dermed all annen innebygd JS-kode, er fullstendig lastet.

6. Litt forklaring

I vår MVC analyserer Thymeleaf malmotoren bare malfilen (index.html i vårt tilfelle) og konverterer den til en HTML-fil. Denne filen kan i sin tur inneholde referanser til andre ressurser som er utenfor omfanget av malmotoren. Det er brukerens nettleser som analyserer ressursene og gjengir HTML-visningen.

Derfor blir disse ressursene ikke analysert av malmotoren, og vi kan bare injisere variabler definert i kontrolleren i den innebygde JS-koden som deretter blir tilgjengelig for den eksterne JS-koden.

7. Konklusjon

I denne veiledningen har vi lært hvordan vi får tilgang til Spring MVC-parametere i en JavaScript-kode.

Som alltid er de komplette kodeeksemplene i GitHub-depotet vårt.