Configurando uma variável JavaScript do modelo Spring usando Thymeleaf

112

Estou usando o Thymeleaf como mecanismo de modelo. Como passo uma variável do modelo Spring para a variável JavaScript?

Spring-side:

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

Cliente:

<script>
    ....
    var m = ${message}; // not working
    alert(m);
    ...
</script>
javascript spring thymeleaf Matteo
fonte

Respostas:

191

De acordo com a documentação oficial :

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

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

/*]]>*/
</script>
Vdenotaris
fonte
1
Não funciona ... erro de javascript erro de sintaxe não
detectado
6
Funciona bem, também é possível ler em messages.properties: var msg = [[# {msg}]];
Andrey
2
@szxnyc se você esquecer a /*<![CDATA[*/macro, você a obterá.
CodeMonkey 01 de
8
Também preste atenção a<script th:inline="javascript">
Grigory Kislin
1
@ MichałStochmal você pode carregar o javascript embutido no topo do javascript externo e usar as mesmas variáveis ​​(definidas no javascript embutido) no javascript externo.
Alfaz Jikani
20 
var message =/*[[${message}]]*/ 'defaultanyvalue';
user5518390
fonte
6
Observe que NÃO deve haver espaço entre / * * / e o contido [[]].
jyu de
1
É importante notar que o defaultanyvalueserá usado apenas ao executar a página estaticamente, ou seja, fora de um contêiner da web. Se rodou dentro de um container e a variável messagenão foi declarada, o código fonte resultante serávar message = null;
Felipe Leão
3
Também é importante adicionar th:inline="javascript"à tag do script.
redent84
15

Thymeleaf 3 agora:

  • Exibir uma constante:

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

  • Exibir uma variável:

    var mensagem = [[$ {mensagem}]];

  • Ou em um comentário para ter um código JavaScript válido ao abrir seu arquivo de modelo de maneira estática (sem executá-lo em um servidor).

    Thymeleaf chama isso de: modelos naturais de JavaScript

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

    Thymeleaf irá ignorar tudo o que escrevemos após o comentário e antes do ponto e vírgula.

Mais informações: http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining

Redochka
fonte
Te agradece! quero te dar uma cerveja, eu estava procurando por esta sintaxe var MY_URL = /*[[${T(com.xyz.constants.Fruits).cheery}]]*/ "";
Aung Aung
12

De acordo com a documentação, existem várias maneiras de fazer o inlining.
Você deve escolher o caminho certo com base na situação.

1) Basta colocar a variável do servidor em javascript: 

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

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

/*]]>*/
</script>

2) Combine variáveis ​​javascript com variáveis ​​do lado do servidor, por exemplo, você precisa criar um link para solicitar dentro do 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>

A única situação que não consigo resolver - então preciso passar a variável javascript dentro da chamada do método Java dentro do modelo (acho que é impossível).

Sanluck
fonte
9

CERTIFIQUE-SE de que já tem o thymleaf na 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
fonte
6

Já vi esse tipo de coisa funcionar na selva:

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