streamalism.org

1. Prehľad

V tomto výučbe ukážeme, ako pristupovať k objektom Spring MVC v zobrazeniach Thymeleaf, ktoré obsahujú kód JavaScript. V našich príkladoch použijeme Spring Boot a šablónový modul Thymeleaf, ale nápad funguje aj pre iné šablónové moduly.

Popíšeme dva prípady: keď je kód JavaScript vložený alebo interný do webovej stránky generovanej motorom, a keď je mimo stránku - napríklad v samostatnom súbore JavaScript.

2. Inštalácia

Predpokladajme, že sme už nakonfigurovali webovú aplikáciu Spring Boot, ktorá používa šablónový modul Thymeleaf. V opačnom prípade by vám mohli byť užitočné tieto návody:

• Bootstrap jednoduchá aplikácia - ako vytvoriť aplikáciu Spring Boot od nuly
• Jarné MVC + Thymeleaf 3.0: Nové funkcie - ako používať syntax Thymeleaf

Ďalej predpokladajme, že naša aplikácia má radič zodpovedajúci koncovému bodu / index ktorý vykresľuje pohľad zo šablóny s názvom index.html. Táto šablóna môže obsahovať napríklad vložený alebo externý kód JavaScriptu script.js.

Naším cieľom je umožniť prístup k parametrom Spring MVC buď z vloženého, ​​alebo z externého kódu JavaScript (JS).

3. Prístup k parametrom

Najskôr je potrebné vytvoriť z modelu JS premenné modelu, ktoré chceme použiť.

Na jar MVC existujú rôzne spôsoby, ako to dosiahnuť. Použime ModelAndView prístup:

@RequestMapping ("/ index") public ModelAndView thymeleafView (model mapy) {model.put ("number", 1234); model.put ("message", "Hello from Spring MVC"); vrátiť nový ModelAndView ("thymeleaf / index"); } 

Ďalšie možnosti môžeme nájsť v našom návode na Model, ModelMapa ModelView na jar MVC.

4. Vložený kód JS

Vložený kód JS nie je nič iné ako súčasť index.html súbor, ktorý sa nachádza vo vnútri element. Môžeme tam priamo odovzdať premenné Spring MVC:

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

Thymeleaf šablónový modul nahradí každý výraz hodnotou, ktorá je k dispozícii v rozsahu aktuálneho vykonania. To znamená, že šablónový modul transformuje vyššie uvedený kód na nasledujúci kód HTML:

 var číslo = 1234; var message = "Ahoj z jarnej MVC!"; 

5. Externý kód JS

Povedzme, že náš externý kód JS je zahrnutý v index.html pomocou rovnakého súboru tag, v ktorom špecifikujeme src atribút:

Teraz, ak chceme použiť parametre Spring MVC z script.js, mali by sme:

1. definujte premenné JS vo vloženom kóde JS, ako sme to urobili v predchádzajúcej časti
2. prístup k týmto premenným z script.js spis

Upozorňujeme, že externý kód JS by sa mal vyvolať po inicializácii premenných vloženého kódu JS.

To sa dá dosiahnuť dvoma spôsobmi: zadaním poradia vykonávania kódu JS alebo použitím asynchrónneho vykonania kódu JS.

5.1. Uveďte exekučný poriadok

Môžeme to urobiť deklarovaním externého kódu JS po vloženom kóde index.html:

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

5.2. Asynchrónne vykonávanie kódu

V takom prípade poradie, v akom deklarujeme externý a vložený kód JS v index.html nie je dôležité, ale mali by sme umiestniť kód z script.js do typického obalu na stránke:

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

Napriek jednoduchosti tohto kódu je najbežnejšou praxou použitie jQuery namiesto toho. Túto knižnicu zaraďujeme ako prvú prvok v index.html spis:

    ...  ... 

Teraz môžeme umiestniť kód JS do nasledujúceho jQuery obal:

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

S týmto obalom môžeme zaručiť, že kód JS sa vykoná, až keď je úplne načítaný celý obsah stránky, a teda aj všetok ďalší vložený kód JS.

6. Trochu vysvetlenia

Na jar MVC analyzuje šablónový modul Thymeleaf iba súbor šablóny (index.html (v našom prípade) a prevedie ho do súboru HTML. Tento súbor môže zase obsahovať odkazy na ďalšie zdroje, ktoré sú mimo rozsahu šablónového nástroja. Je to prehliadač používateľa, ktorý tieto zdroje analyzuje a vykreslí zobrazenie HTML.

Preto tieto zdroje nie sú analyzované šablónovým strojom a môžeme vložiť premenné definované v radiči iba do vloženého kódu JS, ktorý je potom k dispozícii pre externý kód JS.

7. Záver

V tomto tutoriáli sme sa naučili, ako získať prístup k parametrom Spring MVC vo vnútri kódu JavaScript.

Úplné príklady kódu sú ako vždy v našom úložisku GitHub.