web-dev-qa-db-fra.com

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

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

Côté printemps:

@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>
javascriptspringthymeleaf
88
Matteo

Selon le responsable documentation:

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

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

/*]]>*/
</script>
161
vdenotaris
var message =/*[[${message}]]*/ 'defaultanyvalue';
19
user5518390

Thymeleaf 3 maintenant:

  • Afficher une constante:

     <script th: inline = "javascript"> 
 var MY_URL = /*[[$$T(com.xyz.constants.Fruits).cheeryBuchen*** ""; 
 </ 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 cela: 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

10
redochka

Assurez-vous que vous avez déjà thymeleaf à 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>
9
Nitish Kanade

Selon à la documentation il y a plusieurs façons de faire l’inline.
La bonne manière que vous devez choisir en fonction de la situation.

1) Mettez simplement la variable du serveur en 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 puisse pas résoudre - alors je dois passer la variable javascript dans la méthode Java en appelant à l'intérieur du modèle (c'est impossible je suppose).

9
sanluck

J'ai vu ce genre de chose fonctionner à l'état sauvage:

<input type="button"  th:onclick="'javascript:getContactId(\'' + ${contact.id} + '\');'" />
4
Noumenon