Thiết lập biến JavaScript từ mô hình Spring bằng cách sử dụng Thymeleaf

Tôi đang sử dụng Thymeleaf làm công cụ mẫu. Làm cách nào để chuyển một biến từ mô hình Spring sang biến JavaScript?

Spring-side:

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

Phía khách hàng:

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

Theo tài liệu chính thức :

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

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

/*]]>*/
</script>

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

Thymeleaf 3 bây giờ:

• Hiển thị một hằng số:

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

• Hiển thị một biến:

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

• Hoặc trong một nhận xét để có mã JavaScript hợp lệ khi bạn mở tệp mẫu của mình theo cách tĩnh (không thực thi nó tại máy chủ).

  Thymeleaf gọi đây là: Các mẫu tự nhiên JavaScript

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

  Thymeleaf sẽ bỏ qua mọi thứ chúng tôi đã viết sau nhận xét và trước dấu chấm phẩy.

Thông tin thêm: http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inline

Theo tài liệu, có một số cách để thực hiện nội tuyến.
Cách phù hợp bạn phải chọn dựa trên tình huống.

1) Chỉ cần đặt biến từ máy chủ sang javascript:

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

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

/*]]>*/
</script>

2) Kết hợp các biến javascript với các biến phía máy chủ, ví dụ: bạn cần tạo liên kết để yêu cầu bên trong 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>

Một tình huống mà tôi không thể giải quyết - sau đó tôi cần chuyển biến javascript bên trong phương thức Java đang gọi bên trong mẫu (tôi không thể đoán được).

Đảm bảo rằng bạn đã có thymleaf trên trang

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

Tôi đã thấy loại thứ này hoạt động trong tự nhiên:

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