streamalism.org

1. Áttekintés

Ebben az oktatóanyagban bemutatjuk, hogyan lehet elérni a Spring MVC objektumokat a Thymeleaf nézetekben, amelyek JavaScript-kódot tartalmaznak. Példáinkban a Spring Boot és a Thymeleaf sablonmotort használjuk, de az ötlet más sablonmotoroknál is működik.

Két esetet fogunk leírni: amikor a JavaScript kód be van ágyazva vagy belső a motor által létrehozott weboldalra, és amikor az külső az oldalon, például egy különálló JavaScript fájlban.

2. Beállítás

Tegyük fel, hogy már konfiguráltunk egy Spring Boot webalkalmazást, amely a Thymeleaf sablonmotort használja. Ellenkező esetben a következő oktatóanyagok hasznosak lehetnek az indításhoz:

• Bootstrap egy egyszerű alkalmazás - arról, hogyan hozhat létre egy Spring Boot alkalmazást a semmiből
• Tavaszi MVC + Thymeleaf 3.0: Új funkciók - a Thymeleaf szintaxis használatáról

Tegyük fel továbbá, hogy alkalmazásunk rendelkezik egy végpontnak megfelelő vezérlővel /index amely egy nézetet megjelenít egy megnevezett sablonból index.html. Ez a sablon tartalmazhat egy beágyazott vagy egy külső JavaScript-kódot, mondjuk script.js.

Célunk, hogy a tavaszi MVC paramétereket beágyazott vagy külső JavaScript (JS) kódból tudjuk elérni.

3. Nyissa meg a Paramétereket

Először létre kell hoznunk azokat a modellváltozókat, amelyeket a JS kódból használni szeretnénk.

Tavaszi MVC-ben ennek különféle módjai vannak. Használjuk a ModelAndView megközelítés:

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

További lehetőségeket találhatunk a bemutatónkban Modell, ModelMap, és ModelView tavasszal MVC.

4. Beágyazott JS kód

A beágyazott JS kód nem más, mint a index.html fájl, amely a elem. A Spring MVC változókat egészen egyszerűen átadhatjuk ott:

 var szám = [[$ {number}]]; var message = "[[$ {message}]]"; 

A Thymeleaf sablonmotor minden kifejezést az aktuális végrehajtás hatókörében elérhető értékkel helyettesít. Ez azt jelenti, hogy a sablonmotor a fent említett kódot a következő HTML kóddá alakítja:

 var szám = 1234; var message = "Üdvözlet a tavaszi MVC-től!"; 

5. Külső JS-kód

Tegyük fel, hogy a külső JS kódunk benne van a index.html fájl ugyanazt használva tag, amelyben megadjuk a src tulajdonság:

Most, ha a Spring MVC paramétereit akarjuk használni script.js, nekünk kellene:

1. definiálja a JS-változókat beágyazott JS-kódban, ahogy az előző szakaszban tettük
2. hozzáférhet ezekhez a változókhoz a script.js fájl

Ne feledje, hogy a külső JS kódot a beágyazott JS kód változóinak inicializálása után kell meghívni.

Ez kétféleképpen érhető el: a JS-kód végrehajtásának sorrendjének megadásával vagy aszinkron JS-kód-végrehajtás használatával.

5.1. Adja meg a végrehajtás sorrendjét

Ezt úgy tehetjük meg, hogy a beágyazott után deklaráljuk a külső JS kódot index.html:

 var szám = [[$ {number}]]; var message = "[[$ {message}]]"; 

5.2. Aszinkron kódfuttatás

Ebben az esetben az a sorrend, amelyben a külső és beágyazott JS kódot deklaráljuk a index.html nincs jelentősége, de a kódot innen kell elhelyeznünk script.js tipikus, oldalra töltött csomagolóba:

window.onload = function () {// JS kód};

E kód egyszerűsége ellenére a leggyakoribb gyakorlat a használat jQuery helyette. Ezt a könyvtárat foglaljuk elsőnek elem a index.html fájl:

    ...  ... 

Most elhelyezhetjük a JS kódot a következőkben jQuery csomagolás:

$ (function () {// JS kód});

Ezzel a csomagolással garantálhatjuk, hogy a JS kód csak akkor kerül végrehajtásra, ha a teljes oldal tartalma, és így az összes többi beágyazott JS kód is teljesen betöltődik.

6. Egy kis magyarázat

Tavaszi MVC-ben a Thymeleaf sablonmotor csak a sablonfájlt elemzi (index.html esetünkben) és átalakítja HTML fájlokká. Ez a fájl viszont más forrásokra is hivatkozhat, amelyek nem tartoznak a sablonmotor körébe. A felhasználó böngészője elemzi ezeket az erőforrásokat, és megjeleníti a HTML nézetet.

Ezért ezeket az erőforrásokat a sablonmotor nem elemzi, és a vezérlőben definiált változókat csak a beágyazott JS-kódba injektálhatjuk, amely ezután elérhetővé válik a külső JS-kód számára.

7. Következtetés

Ebben az oktatóanyagban megtanultuk, hogyan lehet elérni a tavaszi MVC paramétereket egy JavaScript-kódon belül.

Mint mindig, a teljes kód példák a GitHub adattárunkban találhatók.