Einrichten einer JavaScript-Variablen aus dem Spring-Modell mithilfe von Thymeleaf

112

Ich benutze Thymeleaf als Template-Engine. Wie übergebe ich eine Variable vom Spring-Modell an die JavaScript-Variable?

Federseite:

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

Client-Seite:

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

Antworten:

190

Laut offizieller Dokumentation :

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

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

/*]]>*/
</script>
vdenotaris
quelle
1
Funktioniert nicht ... Javascript-Fehler nicht
erfasster
6
Funktioniert gut, kann auch aus messages.properties gelesen werden: var msg = [[# {msg}]];
Andrey
2
@szxnyc Wenn Sie das /*<![CDATA[*/Makro vergessen, erhalten Sie das.
CodeMonkey
8
<script th:inline="javascript">
Achten Sie auch
1
@ MichałStochmal Sie können Inline-Javascript über externes Javascript laden und dieselben Variablen (definiert in Inline-Javascript) in externem Javascript verwenden.
Alfaz Jikani
20
var message =/*[[${message}]]*/ 'defaultanyvalue';
user5518390
quelle
6
Beachten Sie, dass zwischen / * * / und dem enthaltenen [[]] KEIN Leerzeichen stehen darf.
Jyu
1
Es ist erwähnenswert, dass das defaultanyvaluenur verwendet wird, wenn die Seite statisch ausgeführt wird, dh außerhalb eines Webcontainers. Wenn es in einem Container ausgeführt wird und die Variable messagenicht deklariert wurde, lautet der resultierende Quellcodevar message = null;
Felipe Leão,
3
Auch wichtig, um th:inline="javascript"das Skript-Tag hinzuzufügen .
redent84
15

Thymeleaf 3 jetzt:

  • Eine Konstante anzeigen:

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

    var message = [[$ {message}]];
    
  • Oder in einem Kommentar, um einen gültigen JavaScript-Code zu erhalten, wenn Sie Ihre Vorlagendatei statisch öffnen (ohne sie auf einem Server auszuführen).

    Thymeleaf nennt dies: natürliche JavaScript-Vorlagen

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

    Thymeleaf ignoriert alles, was wir nach dem Kommentar und vor dem Semikolon geschrieben haben.

Weitere Informationen: http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining

Redochka
quelle
Danke! Ich wollte dir ein Bier geben, das ich nach dieser Syntax gesucht habe. var MY_URL = /*[[$ {(.
Aung Aung
12

Laut Dokumentation gibt es verschiedene Möglichkeiten, das Inlining durchzuführen.
Den richtigen Weg müssen Sie je nach Situation wählen.

1) Setzen Sie einfach die Variable vom Server in Javascript:

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

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

/*]]>*/
</script>

2) Kombinieren Sie Javascript-Variablen mit serverseitigen Variablen, z. B. müssen Sie einen Link für die Anforderung innerhalb des Javascript erstellen:

<script th:inline="javascript">
        /*<![CDATA[*/
        function sampleGetByJquery(v) {
            /*[+
            var url = [[@{/my/get/url(var1=${#httpServletRequest.getParameter('var1')})}]] 
                      + "&var2="+v;
             +]*/
            $("#myPanel").load(url, function() {});
        }
        /*]]>*/
        </script>

Die eine Situation, die ich nicht lösen kann - dann muss ich eine Javascript-Variable innerhalb der Java-Methode übergeben, die in der Vorlage aufgerufen wird (es ist unmöglich, denke ich).

Sanluck
quelle
9

Stellen Sie sicher, dass Sie bereits ein Blatt auf der Seite haben

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

Ich habe gesehen, wie so etwas in freier Wildbahn funktioniert:

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