Konfigurowanie zmiennej JavaScript z modelu Spring przy użyciu Thymeleaf

112

Używam Thymeleaf jako silnika szablonu. Jak przekazać zmienną z modelu Spring do zmiennej JavaScript?

Strona wiosny:

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

Strona klienta:

<script>
    ....
    var m = ${message}; // not working
    alert(m);
    ...
</script>
Matteo
źródło

Odpowiedzi:

191

Według oficjalnej dokumentacji :

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

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

/*]]>*/
</script>
vdenotaris
źródło
1
Nie działa ... błąd javascript nieprzechwycony błąd składni
szxnyc
6
Działa dobrze, można również odczytać z wiadomości messages.properties: var msg = [[# {msg}]];
Andrey
2
@szxnyc, jeśli zapomnisz /*<![CDATA[*/makro, otrzymasz to.
CodeMonkey
8
<script th:inline="javascript">
Zwróć
1
@ MichałStochmal możesz załadować wbudowany javascript na zewnętrzny javascript i używać tych samych zmiennych (zdefiniowanych w inline javascript) w zewnętrznym javascript.
Alfaz Jikani
20
var message =/*[[${message}]]*/ 'defaultanyvalue';
user5518390
źródło
6
Zauważ, że nie powinno być spacji między / * * / a zawartym [[]].
jyu
1
Warto zauważyć, że defaultanyvaluebędzie on używany tylko podczas uruchamiania strony statycznie, czyli poza kontenerem WWW. Jeśli uruchomiono wewnątrz kontenera, a zmienna messagenie została zadeklarowana, wynikowy kod źródłowy będzie var message = null;
wyglądał następująco
3
Ważne jest również dodanie th:inline="javascript"do tagu skryptu.
redent84
15

Thymeleaf 3 teraz:

  • Wyświetl stałą:

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

    var message = [[$ {message}]];
    
  • Lub w komentarzu, aby mieć poprawny kod JavaScript podczas otwierania pliku szablonu w sposób statyczny (bez wykonywania go na serwerze).

    Thymeleaf nazywa to: naturalnymi szablonami JavaScript

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

    Thymeleaf zignoruje wszystko, co napisaliśmy po komentarzu i przed średnikiem.

Więcej informacji: http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining

redochka
źródło
dzięki Ci! chcę ci dać piwo, szukałem tej składni var MY_URL = /*[${T(com.xyz.constants.Fruits).cheery}]]*/ "";
Aung Aung
12

Zgodnie z dokumentacją istnieje kilka sposobów wykonania inliningu.
Właściwy sposób, który musisz wybrać w zależności od sytuacji.

1) Po prostu umieść zmienną z serwera w javascript:

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

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

/*]]>*/
</script>

2) Połącz zmienne javascript ze zmiennymi po stronie serwera, np. Musisz stworzyć link do żądania wewnątrz 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>

Jedyna sytuacja, której nie potrafię rozwiązać - wtedy muszę przekazać zmienną javascript wewnątrz metody Java wywołującej wewnątrz szablonu (to chyba niemożliwe).

sanluck
źródło
9

UPEWNIJ SIĘ, że masz już tymianek na stronie

//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
źródło
6

Widziałem takie rzeczy działające na wolności:

<input type="button"  th:onclick="'javascript:getContactId(\'' + ${contact.id} + '\');'" />
Noumenon
źródło