Configuración de una variable de JavaScript desde el modelo Spring usando Thymeleaf

112

Estoy usando Thymeleaf como motor de plantilla. ¿Cómo paso una variable del modelo Spring a la variable JavaScript?

Lado del resorte:

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

Lado del cliente:

<script>
    ....
    var m = ${message}; // not working
    alert(m);
    ...
</script>
Matteo
fuente

Respuestas:

191

Según la documentación oficial :

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

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

/*]]>*/
</script>
vdenotaris
fuente
1
No funciona ... error de javascript error de sintaxis no
detectado
6
Funciona bien, también es posible leer de messages.properties: var msg = [[# {msg}]];
Andrey
2
@szxnyc, si olvidas la /*<![CDATA[*/macro, obtendrás eso.
CodeMonkey
8
También preste atención a<script th:inline="javascript">
Grigory Kislin
1
@ MichałStochmal puede cargar javascript en línea sobre javascript externo y usar las mismas variables (definidas en javascript en línea) en javascript externo.
Alfaz Jikani
20
var message =/*[[${message}]]*/ 'defaultanyvalue';
usuario5518390
fuente
6
Tenga en cuenta que NO debe haber espacio entre / * * / y el contenido [[]].
jyu
1
Vale la pena señalar que defaultanyvaluesolo se utilizará cuando la página se ejecute de forma estática, es decir, fuera de un contenedor web. Si se ejecutó dentro de un contenedor y la variable messageno ha sido declarada, el código fuente resultante serávar message = null;
Felipe Leão
3
También es importante agregar th:inline="javascript"a la etiqueta de secuencia de comandos.
redent84
15

Thymeleaf 3 ahora:

  • Mostrar una constante:

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

    var mensaje = [[$ {mensaje}]];
    
  • O en un comentario para tener un código JavaScript válido cuando abre su archivo de plantilla de manera estática (sin ejecutarlo en un servidor).

    Thymeleaf llama a esto: plantillas naturales de JavaScript

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

    Thymeleaf ignorará todo lo que hayamos escrito después del comentario y antes del punto y coma.

Más información: http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining

redochka
fuente
¡gracias! quiero darte una cerveza. Estaba buscando esta sintaxis var MY_URL = /*[[${T(com.xyz.constants.Fruits).cheery}]]*/ "";
Aung Aung
12

Según la documentación, hay varias formas de hacer el inlining.
La forma correcta debe elegir en función de la situación.

1) Simplemente coloque la variable del servidor en javascript:

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

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

/*]]>*/
</script>

2) Combine variables de javascript con variables del lado del servidor, por ejemplo, necesita crear un enlace para solicitar dentro del 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 única situación que no puedo resolver , entonces necesito pasar la variable javascript dentro de la llamada al método Java dentro de la plantilla (es imposible, supongo).

sanluck
fuente
9

ASEGÚRESE de que ya tiene thymleaf en la página

//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
fuente
6

He visto este tipo de cosas funcionar en la naturaleza:

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