Impostazione di una variabile JavaScript dal modello Spring utilizzando Thymeleaf


112

Sto usando Thymeleaf come motore di modelli. Come passo una variabile dal modello Spring alla variabile JavaScript?

Primavera-side:

@RequestMapping(value = "message", method = RequestMethod.GET)
public String messages(Model model) {
    model.addAttribute("message", "hello");
    return "index";
}

Dalla parte del cliente:

<script>
    ....
    var m = ${message}; // not working
    alert(m);
    ...
</script>

Risposte:


191

Secondo la documentazione ufficiale :

<script th:inline="javascript">
/*<![CDATA[*/

    var message = /*[[${message}]]*/ 'default';
    console.log(message);

/*]]>*/
</script>

1
Non funziona ... errore javascript errore di sintassi non
rilevato

6
Funziona bene, è anche possibile leggere da messages.properties: var msg = [[# {msg}]];
Andrey

2
@szxnyc se dimentichi la /*<![CDATA[*/macro la otterrai.
CodeMonkey

8
Attenzione anche a<script th:inline="javascript">
Grigory Kislin

1
@ MichałStochmal puoi caricare javascript inline sopra javascript esterno e utilizzare le stesse variabili (definite in javascript inline) in javascript esterno.
Alfaz Jikani

20
var message =/*[[${message}]]*/ 'defaultanyvalue';

6
Notare che NON dovrebbe esserci spazio tra / * * / e il contenuto [[]].
jyu

1
Vale la pena notare che defaultanyvalueverrà utilizzato solo quando si esegue la pagina in modo statico, cioè al di fuori di un contenitore web. Se eseguito all'interno di un contenitore e la variabile messagenon è stata dichiarata, il codice sorgente risultante saràvar message = null;
Felipe Leão

3
Importante anche da aggiungere th:inline="javascript"al tag script.
redent84

15

Thymeleaf 3 ora:

  • Visualizza una costante:

    <script th: inline = "javascript">
    var MY_URL = /*[[${T(com.xyz.constants.Fruits).cheery}” effettuate*/ "";
    </ Script>
    
  • Visualizza una variabile:

    var messaggio = [[$ {messaggio}]];
    
  • O in un commento per avere un codice JavaScript valido quando apri il tuo file modello in modo statico (senza eseguirlo su un server).

    Thymeleaf lo chiama: JavaScript natural templates

    var messaggio = / * [[$ {messaggio}]] * / "";
    

    Thymeleaf ignorerà tutto ciò che abbiamo scritto dopo il commento e prima del punto e virgola.

Maggiori informazioni: http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining


grazie! voglio darti una birra che stavo cercando con questa sintassi var MY_URL = /*[[${T(com.xyz.constants.Fruits).cheery}”load*/ "";
Aung Aung

12

Secondo la documentazione ci sono diversi modi per eseguire l'inlining.
Il modo giusto da scegliere in base alla situazione.

1) Metti semplicemente la variabile dal server a javascript:

<script th:inline="javascript">
/*<![CDATA[*/

var message = [[${message}]];
alert(message);

/*]]>*/
</script>

2) Combina variabili javascript con variabili lato server, ad esempio è necessario creare un collegamento per la richiesta all'interno del javascript:

<script th:inline="javascript">
        /*<![CDATA[*/
        function sampleGetByJquery(v) {
            /*[+
            var url = [[@{/my/get/url(var1=${#httpServletRequest.getParameter('var1')})}]] 
                      + "&var2="+v;
             +]*/
            $("#myPanel").load(url, function() {});
        }
        /*]]>*/
        </script>

L'unica situazione che non riesco a risolvere - quindi devo passare la variabile javascript all'interno del metodo Java chiamando all'interno del modello (è impossibile immagino).


9

Assicurati di avere già la foglia di timo sulla pagina

//Use this in java
@Controller
@RequestMapping("/showingTymleafTextInJavaScript")
public String thankYou(Model model){
 model.addAttribute("showTextFromJavaController","dummy text");
 return "showingTymleafTextInJavaScript";
}


//thymleaf page  javascript page
<script>
var showtext = "[[${showTextFromJavaController}]]";
console.log(showtext);
</script>

6

Ho visto questo genere di cose funzionare in natura:

<input type="button"  th:onclick="'javascript:getContactId(\'' + ${contact.id} + '\');'" />
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.