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>

Respuestas:


191

Según la documentación oficial :

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

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

/*]]>*/
</script>

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';

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


¡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).


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>

6

He visto este tipo de cosas funcionar en la naturaleza:

<input type="button"  th:onclick="'javascript:getContactId(\'' + ${contact.id} + '\');'" />
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.