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>
Selon le responsable documentation:
<script th:inline="javascript">
/*<![CDATA[*/
var message = /*[[${message}]]*/ 'default';
console.log(message);
/*]]>*/
</script>
var message =/*[[${message}]]*/ 'defaultanyvalue';
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
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>
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).
J'ai vu ce genre de chose fonctionner à l'état sauvage:
<input type="button" th:onclick="'javascript:getContactId(\'' + ${contact.id} + '\');'" />