Configuration d'une variable javascript à partir du modèle Spring à L'aide de Thymeleaf
Comment puis-je lire une variable de modèle à partir de Spring model et la configurer dans un Javascript?
Notez que j'utilise Thymeleaf comme moteur de modèle.
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>
6 réponses
De l'officiel la documentation:
<script th:inline="javascript">
/*<![CDATA[*/
var message = /*[[${message}]]*/ 'default';
console.log(message);
/*]]>*/
</script>
Thymeleaf 3 maintenant:
-
Affiche une constante:
<script th:inline="javascript"> var MY_URL = /*[[${T(com.xyz.constants.Fruits).cheery}]]*/ ""; </script> -
Affiche une variable:
var message = [[${message}]]; -
Ou dans un commentaire valide code JavaScript 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
Selon à la documentation Il y a plusieurs façons de faire l'inlining.
La bonne façon dont vous devez choisir en fonction de la situation.
1) Mettez simplement la variable du serveur au 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 j'ai besoin de passer la variable javascript dans la méthode Java appeler à l'intérieur du modèle (c'est impossible je suppose).
//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>
J'ai vu ce genre de chose fonctionner dans la nature:
<input type="button" th:onclick="'javascript:getContactId(\'' + ${contact.id} + '\');'" />