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>Réponses:
Selon la documentation officielle :
<script th:inline="javascript">
/*<![CDATA[*/
var message = /*[[${message}]]*/ 'default';
console.log(message);
/*]]>*/
</script>/*<![CDATA[*/macro, vous l'obtiendrez.
<script th:inline="javascript">
var message =/*[[${message}]]*/ 'defaultanyvalue';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;
th:inline="javascript"à la balise de script.
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
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).
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>