streamalism.org

1. Oversigt

I denne vejledning skal vi vise, hvordan du får adgang til Spring MVC-objekter i Thymeleaf-visninger, der indeholder JavaScript-kode. Vi bruger Spring Boot og Thymeleaf-skabelonmotoren i vores eksempler, men ideen fungerer også for andre skabelonmotorer.

Vi vil beskrive to tilfælde: når JavaScript-kode er integreret eller intern på websiden, der genereres af motoren, og når den er ekstern til siden - for eksempel i en separat JavaScript-fil.

2. Opsætning

Lad os antage, at vi allerede har konfigureret en Spring Boot-webapplikation, der bruger Thymeleaf-skabelonmotor. Ellers kan du finde disse tutorials nyttige til at starte:

• Bootstrap en simpel applikation - hvordan man opretter en Spring Boot-applikation fra bunden
• Spring MVC + Thymeleaf 3.0: Nye funktioner - om hvordan man bruger Thymeleaf syntaks

Lad os endvidere antage, at vores applikation har en controller, der svarer til et slutpunkt /indeks der gengiver en visning fra en navngivet skabelon index.html. Denne skabelon kan f.eks. Indeholde en integreret eller en ekstern JavaScript-kode script.js.

Vores mål er at kunne få adgang til Spring MVC-parametre fra enten indbygget eller ekstern JavaScript (JS) -kode.

3. Få adgang til parametrene

Først og fremmest skal vi oprette de modelvariabler, som vi vil bruge fra JS-koden.

I Spring MVC er der forskellige måder at gøre dette på. Lad os bruge ModelAndView nærme sig:

@RequestMapping ("/ index") offentlig ModelAndView thymeleafView (kortmodel) {model.put ("nummer", 1234); model.put ("besked", "Hej fra foråret MVC"); returner nyt ModelAndView ("thymeleaf / index"); } 

Vi kan finde andre muligheder i vores tutorial om Model, ModelMapog ModelView i foråret MVC.

4. Indlejret JS-kode

Integreret JS-kode er intet andet end en del af index.html fil, der er placeret inde i element. Vi kan overføre Spring MVC-variabler der ret direkte:

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

Thymeleaf-skabelonmotor erstatter hvert udtryk med en værdi, der er tilgængelig inden for omfanget af den aktuelle udførelse. Dette betyder, at skabelonmotoren omdanner ovennævnte kode til følgende HTML-kode:

 var antal = 1234; var message = "Hej fra foråret MVC!"; 

5. Ekstern JS-kode

Lad os sige, at vores eksterne JS-kode er inkluderet i index.html fil ved hjælp af den samme tag, hvor vi angiver src attribut:

Nu, hvis vi vil bruge Spring MVC-parametrene fra script.js, vi skulle:

1. definere JS-variabler i indlejret JS-kode, som vi gjorde i det foregående afsnit
2. få adgang til disse variabler fra script.js fil

Bemærk, at den eksterne JS-kode skal påberåbes efter initialiseringen af ​​variablerne i den integrerede JS-kode.

Dette kan opnås på to måder: ved at specificere rækkefølgen for en JS-kodeudførelse eller ved at bruge en asynkron JS-kodeudførelse.

5.1. Angiv rækkefølgen for udførelsen

Vi kan gøre dette ved at erklære den eksterne JS-kode efter den indlejrede i index.html:

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

5.2. Asynkron kodeudførelse

I dette tilfælde er rækkefølgen, hvor vi erklærer den eksterne og indlejrede JS-kode i index.html er uden betydning, men vi skal placere koden fra script.js ind i en typisk indpakning, der er indlæst på siden:

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

På trods af denne kodes enkelhed er den mest almindelige praksis at bruge jQuery i stedet. Vi inkluderer dette bibliotek som det første element i index.html fil:

    ...  ... 

Nu kan vi placere JS-koden inde i det følgende jQuery indpakning:

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

Med denne indpakning kan vi garantere, at JS-koden kun udføres, når hele sideindholdet og dermed al anden indlejret JS-kode er fuldstændigt indlæst.

6. En smule forklaring

I Spring MVC analyserer Thymeleaf-skabelonmotoren kun skabelonfilen (index.html i vores tilfælde) og konverterer det til en HTML-fil. Denne fil kan på sin side muligvis indeholde henvisninger til andre ressourcer, der er uden for skabelonmotoren. Det er brugerens browser, der analyserer disse ressourcer og gengiver HTML-visningen.

Derfor parses disse ressourcer ikke af skabelonmotoren, og vi injicerer muligvis kun variabler, der er defineret i controlleren, i den indlejrede JS-kode, som derefter bliver tilgængelig for den eksterne JS-kode.

7. Konklusion

I denne vejledning har vi lært, hvordan du får adgang til Spring MVC-parametre inde i en JavaScript-kode.

Som altid findes de komplette kodeeksempler i vores GitHub-lager.