Configuration d'une variable JavaScript à partir du modèle Spring à l'aide de Thymeleaf

112

J'utilise Thymeleaf comme moteur de modèle. Comment passer une variable du modèle Spring à une variable JavaScript?

Côté ressort:

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

Côté client:

<script>
    ....
    var m = ${message}; // not working
    alert(m);
    ...
</script>
javascript spring thymeleaf Matteo
la source

Réponses:

191

Selon la documentation officielle :

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

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

/*]]>*/
</script>
vdenotaris
la source
1
Ne fonctionne pas ... Erreur javascript Erreur de syntaxe non
interceptée
6
Fonctionne très bien, également possible de lire à partir de messages.properties: var msg = [[# {msg}]];
Andrey
2
@szxnyc si vous oubliez la /*<![CDATA[*/macro, vous l'obtiendrez.
CodeMonkey
8
Attention aussi à<script th:inline="javascript">
Grigory Kislin
1
@ MichałStochmal vous pouvez charger du javascript en ligne au-dessus du javascript externe et utiliser les mêmes variables (définies en javascript en ligne) dans du javascript externe.
Alfaz Jikani le
20 
var message =/*[[${message}]]*/ 'defaultanyvalue';
user5518390
la source
6
Notez qu'il ne doit y avoir aucun espace entre / * * / et le contenu [[]].
jyu
1
Il est à noter que le defaultanyvaluene sera utilisé que lors de l'exécution de la page de manière statique, c'est-à-dire en dehors d'un conteneur Web. Si elle est exécutée dans un conteneur et que la variable messagen'a pas été déclarée, le code source résultant seravar message = null;
Felipe Leão
3
Il est également important d'ajouter th:inline="javascript"à la balise de script.
redent84
15

Thymeleaf 3 maintenant:

  • Afficher une constante:

    <script th: inline = "javascript">
var MY_URL = /*[[${T(com.xyz.constants.Fruits).cheery}[/] ./ "";
</script>

  • Afficher une variable:

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

  • Ou dans un commentaire pour avoir un code JavaScript valide lorsque vous ouvrez votre fichier de modèle de manière statique (sans l'exécuter sur un serveur).

    Thymeleaf appelle ceci: Modèles naturels JavaScript

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

    Thymeleaf ignorera tout ce que nous avons écrit après le commentaire et avant le point-virgule.

Plus d'infos: http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining

redochka
la source
Merci! je veux vous donner une bière je cherchais cette syntaxe var MY_URL = /*[[${T(com.xyz.constants.Fruits).cheery}[/).
Aung Aung
12

Selon la documentation, il existe plusieurs façons de faire l'inlining.
La bonne manière, vous devez choisir en fonction de la situation.

1) Mettez simplement la variable du serveur à javascript: 

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

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

/*]]>*/
</script>

2) Combinez des variables javascript avec des variables côté serveur, par exemple, vous devez créer un lien pour demander à l'intérieur du 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>

La seule situation que je ne peux pas résoudre - alors je dois passer la variable javascript à l'intérieur de la méthode Java appelant à l'intérieur du modèle (c'est impossible je suppose).

sanluck
la source
9

Assurez-vous que vous avez déjà une feuille de thym sur la page

//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>
Nitish Kanade
la source
6

J'ai vu ce genre de choses fonctionner dans la nature:

<input type="button"  th:onclick="'javascript:getContactId(\'' + ${contact.id} + '\');'" />
Noumène
la source