streamalism.org

1. Overzicht

In deze zelfstudie laten we zien hoe u toegang krijgt tot Spring MVC-objecten in Thymeleaf-weergaven die JavaScript-code bevatten. We gebruiken Spring Boot en de Thymeleaf-sjabloonengine in onze voorbeelden, maar het idee werkt ook voor andere sjabloonengines.

We gaan twee gevallen beschrijven: wanneer JavaScript-code is ingesloten of intern is in de webpagina die door de engine is gegenereerd, en wanneer deze zich buiten de pagina bevindt, bijvoorbeeld in een afzonderlijk JavaScript-bestand.

2. Installatie

Laten we aannemen dat we al een Spring Boot-webtoepassing hebben geconfigureerd die de Thymeleaf-sjabloonengine gebruikt. Anders vindt u deze tutorials wellicht handig om mee te beginnen:

• Bootstrap een eenvoudige applicatie - over het maken van een Spring Boot-applicatie vanaf het begin
• Spring MVC + Thymeleaf 3.0: nieuwe functies - over het gebruik van Thymeleaf-syntaxis

Laten we verder aannemen dat onze applicatie een controller heeft die overeenkomt met een eindpunt /inhoudsopgave dat een weergave weergeeft vanuit een sjabloon met de naam index.html. Deze sjabloon kan bijvoorbeeld een ingesloten of een externe JavaScript-code bevatten script.js.

Ons doel is om toegang te krijgen tot Spring MVC-parameters vanuit ingesloten of externe JavaScript-code (JS).

3. Toegang tot de parameters

Allereerst moeten we de modelvariabelen maken die we willen gebruiken op basis van de JS-code.

In Spring MVC zijn er verschillende manieren om dit te doen. Laten we de ModelAndView nadering:

@RequestMapping ("/ index") openbare ModelAndView thymeleafView (kaartmodel) {model.put ("number", 1234); model.put ("bericht", "Hallo van Spring MVC"); retourneer nieuw ModelAndView ("thymeleaf / index"); } 

We kunnen andere mogelijkheden vinden in onze tutorial over Model, ModelMap, en ModelView in het voorjaar van MVC.

4. Ingesloten JS-code

Ingesloten JS-code is niets anders dan een onderdeel van de index.html bestand dat zich in het element. We kunnen Spring MVC-variabelen daar vrij eenvoudig doorgeven:

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

Thymeleaf-sjabloonengine vervangt elke uitdrukking door een waarde die beschikbaar is in het bereik van de huidige uitvoering. Dit betekent dat de sjabloonengine de bovenstaande code omzet in de volgende HTML-code:

 var nummer = 1234; var message = "Hallo van Spring MVC!"; 

5. Externe JS-code

Laten we zeggen dat onze externe JS-code is opgenomen in de index.html bestand met hetzelfde tag, waarin we de src attribuut:

Als we nu de Spring MVC-parameters van script.js, we zouden:

1. definieer JS-variabelen in ingebedde JS-code zoals we in de vorige sectie hebben gedaan
2. toegang tot deze variabelen vanuit het script.js het dossier

Merk op dat de externe JS-code moet worden aangeroepen na de initialisatie van de variabelen van de ingesloten JS-code.

Dit kan op twee manieren worden bereikt: door de volgorde van een JS-code-uitvoering te specificeren of door een asynchrone JS-code-uitvoering te gebruiken.

5.1. Specificeer de volgorde van uitvoering

We kunnen dit doen door de externe JS-code te declareren na de ingesloten code in index.html:

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

5.2. Asynchrone uitvoering van code

In dit geval is de volgorde waarin we de externe en ingesloten JS-code in het index.html is niet belangrijk, maar we moeten de code van script.js in een typische wrapper die op de pagina is geladen:

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

Ondanks de eenvoud van deze code is het gebruik van jQuery in plaats daarvan. We nemen deze bibliotheek als eerste op element in het index.html het dossier:

    ...  ... 

Nu kunnen we de JS-code in het volgende plaatsen jQuery wikkel:

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

Met deze wrapper kunnen we garanderen dat de JS-code alleen wordt uitgevoerd als de hele pagina-inhoud, en dus alle andere ingesloten JS-code, volledig is geladen.

6. Een beetje uitleg

In Spring MVC parseert de Thymeleaf-sjabloonengine alleen het sjabloonbestand (index.html in ons geval) en converteert het naar een HTML-bestand. Dit bestand kan op zijn beurt verwijzingen bevatten naar andere bronnen die buiten het bereik van de sjabloonengine vallen. Het is de browser van de gebruiker die die bronnen parseert en de HTML-weergave weergeeft.

Daarom worden die bronnen niet geparseerd door de sjabloonengine en kunnen we variabelen die in de controller zijn gedefinieerd, alleen in de ingebedde JS-code injecteren die dan beschikbaar komt voor de externe JS-code.

7. Conclusie

In deze zelfstudie hebben we geleerd hoe we toegang kunnen krijgen tot Spring MVC-parameters in een JavaScript-code.

Zoals altijd staan ​​de volledige codevoorbeelden in onze GitHub-repository.