Thymeleaf를 사용하여 Spring 모델에서 JavaScript 변수 설정

Thymeleaf를 템플릿 엔진으로 사용하고 있습니다. Spring 모델에서 JavaScript 변수로 변수를 전달하는 방법은 무엇입니까?

스프링 측 :

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

고객 입장에서:

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

공식 문서 에 따르면 :

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

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

/*]]>*/
</script>

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

이제 Thymeleaf 3 :

• 상수 표시 :

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

• 변수 표시 :

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

• 또는 서버에서 실행하지 않고 정적 방식으로 템플릿 파일을 열 때 유효한 JavaScript 코드를 포함하는 주석에 있습니다.

  Thymeleaf는 이것을 호출합니다 : JavaScript 자연 템플릿

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

  Thymeleaf는 주석 뒤와 세미콜론 이전에 작성한 모든 내용을 무시합니다.

추가 정보 : http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining

문서 에 따르면 인라인을 수행하는 방법에는 여러 가지가 있습니다.
상황에 따라 올바른 방법을 선택해야합니다.

1) 간단히 서버에서 javascript로 변수를 넣으십시오.

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

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

/*]]>*/
</script>

2) 자바 스크립트 변수를 서버 측 변수와 결합합니다. 예를 들어 자바 스크립트 내부에서 요청하기위한 링크를 만들어야합니다.

<script th:inline="javascript">
        /*<![CDATA[*/
        function sampleGetByJquery(v) {
            /*[+
            var url = [[@{/my/get/url(var1=${#httpServletRequest.getParameter('var1')})}]] 
                      + "&var2="+v;
             +]*/
            $("#myPanel").load(url, function() {});
        }
        /*]]>*/
        </script>

해결할 수없는 한 가지 상황 -템플릿 내부에서 호출하는 Java 메서드 내부에 javascript 변수를 전달해야합니다 (나는 추측 할 수 없음).

페이지에 이미 thymleaf가 있는지 확인하십시오.

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

나는 이런 종류의 일이 야생에서 작동하는 것을 보았습니다.

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