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

Program / 글쓴이

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} + '\');'" />

답변