Menyiapkan variabel JavaScript dari model Spring dengan menggunakan Thymeleaf

112

Saya menggunakan Thymeleaf sebagai mesin template. Bagaimana cara meneruskan variabel dari model Spring ke variabel JavaScript?

Sisi pegas:

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

Sisi klien:

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

Jawaban:

191

Menurut dokumentasi resmi :

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

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

/*]]>*/
</script>
vdenotaris.dll
sumber
1
Tidak berfungsi ... kesalahan javascript tidak tertangkap kesalahan sintaks
szxnyc
6
Berfungsi dengan baik, juga mungkin untuk membaca dari messages.properties: var msg = [[# {msg}]];
Andrey
2
@ szxnyc jika Anda lupa /*<![CDATA[*/makro Anda akan mendapatkannya.
CodeMonkey
8
Perhatikan juga<script th:inline="javascript">
Grigory Kislin
1
@ MichałStochmal Anda dapat memuat javascript inline di atas javascript eksternal dan menggunakan variabel yang sama (didefinisikan dalam javascript inline) di javascript eksternal.
Alfaz Jikani
20
var message =/*[[${message}]]*/ 'defaultanyvalue';
pengguna5518390
sumber
6
Perhatikan itu harus NO spasi antara / * * / dan [[]] yang terkandung.
jyu
1
Perlu dicatat bahwa defaultanyvaluehanya akan digunakan saat menjalankan halaman secara statis, yaitu di luar wadah web. Jika dijalankan di dalam wadah dan variabel messagebelum dideklarasikan, kode sumber yang dihasilkan adalahvar message = null;
Felipe Leão
3
Juga penting untuk ditambahkan th:inline="javascript"ke tag script.
redent84
15

Thymeleaf 3 sekarang:

  • Tampilkan konstanta:

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

    var message = [[$ {message}]];
    
  • Atau dalam komentar untuk memiliki kode JavaScript yang valid ketika Anda membuka file template Anda secara statis (tanpa menjalankannya di server).

    Thymeleaf menyebutnya: template alami JavaScript

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

    Timeleaf akan mengabaikan semua yang kita tulis setelah komentar dan sebelum titik koma.

Info lebih lanjut: http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining

redochka
sumber
terimakasih! ingin memberi Anda bir saya sedang mencari sintaks ini var MY_URL = /*[[${T(com.xyz.constants.Fruits).cheery}]]*/ "";
Aung Aung
12

Berdasarkan dokumentasi tersebut ada beberapa cara untuk melakukan inlining.
Cara yang benar Anda harus memilih berdasarkan situasi.

1) Sederhananya variabel dari server ke javascript:

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

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

/*]]>*/
</script>

2) Gabungkan variabel javascript dengan variabel sisi server, misalnya Anda perlu membuat tautan untuk meminta di dalam 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>

Satu situasi yang tidak dapat saya selesaikan - maka saya harus meneruskan variabel javascript di dalam metode Java yang memanggil di dalam template (saya kira tidak mungkin).

sanluck
sumber
9

Pastikan Anda sudah memiliki daun timun di halaman

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

Saya telah melihat hal semacam ini berhasil di alam liar:

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