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

Question

Làm cách nào để đọc biến mô hình từ mô hình Spring và thiết lập mô hình đó thành Javascript?

Lưu ý rằng tôi đang sử dụng Thymeleaf làm Công cụ tạo mẫu.

mùa xuân-side:

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

Client-side:

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

Answer 1

Từ chính thức documentation:

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

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

/*]]>*/ 
</script> 

Answer 2

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

Answer 3

Theo to the documentation có một số cách để thực hiện nội tuyến.
Đúng cách bạn phải chọn dựa trên tình huống.

1) Đơn giản chỉ cần đặt biến từ máy chủ đến 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 cho 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> 

Người tình tôi không thể giải quyết - sau đó tôi cần phải vượt qua biến javascript bên trong phương thức Java gọi bên trong mẫu (nó không thể tôi đoán) .

Answer 4

Tôi đã nhìn thấy loại công việc điều trong tự nhiên:

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

Answer 5

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 nhận xét để có mã JavaScript hợp lệ khi bạn mở tệp mẫu theo cách tĩnh (không thực thi tại máy chủ).

  Thymeleaf gọi này: JavaScript mẫu tự nhiên

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

  Thymeleaf sẽ bỏ qua tất cả mọi thứ chúng tôi đã viết sau khi bình luận 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-inlining

Answer 6

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