Menyiapkan variabel JavaScript dari model Spring dengan menggunakan Thymeleaf

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>

Menurut dokumentasi resmi :

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

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

/*]]>*/
</script>

var message =/*[[${message}]]*/ 'defaultanyvalue';

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

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

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>

Saya telah melihat hal semacam ini berhasil di alam liar:

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