Konfigurowanie zmiennej javascript z modelu Spring za pomocą Thymeleaf

Question

Jak mogę odczytać model zmienny z modelu Spring i ustawić go w JavaScript?

Należy pamiętać, że używam Thymeleaf jako silnika szablonów.

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

Z oficjalnej documentation:

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

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

/*]]>*/ 
</script> 

Answer 2

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

Answer 3

Według to the documentation Istnieje kilka sposobów, aby wykonać inline.
Właściwy sposób należy wybrać w zależności od sytuacji.

1) Upraszczając zmienną z serwera do JavaScript:

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

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

/*]]>*/ 
</script> 

2) Połączyć zmienne JavaScript z zmienne po stronie serwera, na przykład trzeba utworzyć łącze do żądania wewnątrz 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> 

Jedna sytuacja nie mogę rozwiązać - wtedy trzeba przekazać zmienną javascript wewnątrz metody Java wywołującego wewnątrz szablonu (jest to niemożliwe, chyba) .

Answer 4

Widziałem tego rodzaju pracy rzeczą w środowisku naturalnym:

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

Answer 5

Thymeleaf 3 teraz:

• Wyświetlacz stały:

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

• Wyświetlacz zmienna :

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

• Lub w komentarzu do poprawnego kodu JavaScript po otwarciu pliku szablonu w sposób statyczny (bez wykonywania go na serwerze).

  Thymeleaf nazywa to: JavaScript naturalne szablony

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

  Thymeleaf będzie ignorować wszystko, co napisałem po komentarzu a przed średnikiem.

Więcej informacji: 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>