Tymeleaf를 사용하여 스프링 모델에서 JavaScript 변수 설정

Tymeleaf를 사용하여 스프링 모델에서 JavaScript 변수 설정

저는 Tymeleaf를 템플릿 엔진으로 사용하고 있습니다.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>

지금 바로 Tymeleaf 3:

• 상수 표시:

  <스크립트 th:cript="criptascript">var MY_URL = /*[${T(com.xyz.constants)]과일).cheery}]*/ " ,</script>

• 변수를 표시합니다.

  var 메시지 = [[${message}]];
  

• 또는 (서버에서 실행하지 않고) 정적인 방법으로 템플릿파일을 열 때 유효한 JavaScript 코드를 가지는 코멘트도 있습니다.

  Thymeleaf는 이를 JavaScript 내추럴 템플릿이라고 부릅니다.

  var 메시지 = /*[${message}]]*/ ",

  Tymeleaf는 코멘트 후와 세미콜론 앞에 쓴 모든 내용을 무시합니다.

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

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

설명서에 따르면 인라이닝에는 몇 가지 방법이 있습니다.
상황에 따라 올바른 방법을 선택해야 합니다.

1) 변수를 서버에서 javascript로 간단하게 입력합니다.

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

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

/*]]>*/
</script>

2) javascript 변수와 서버 측 변수를 조합합니다.예를 들어, 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>

제가 해결할 수 없는 한 가지 상황은 자바 메서드 내에서 javascript 변수를 템플릿 내에서 호출해야 한다는 것입니다(불가능할 것 같습니다).

심엽이 이미 페이지에 있는지 확인합니다.

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

Tymeleaf 3을 사용하는 경우:

<script th:inline="javascript">
    var username = [[${session.user.name}]];
</script>

변수를 이스케이프하지 않고 표시해야 하는 경우 다음 형식을 사용합니다.

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

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

/*]]>*/
</script>

주의:[(괄호로 묶습니다.

또 다른 방법은 tymeleaf 포럼에 기재되어 있는 것처럼 Java 컨트롤러에 의해 반환되는 동적 javascript를 작성하는 것입니다.http://forum.thymeleaf.org/Can-I-use-th-inline-for-a-separate-javascript-file-td4025766.html

이를 처리하는 한 가지 방법은 URL이 포함된 동적 javascript 파일을 만드는 것입니다.다음으로 스텝을 나타냅니다(Spring MVC를 사용하는 경우).

@RequestMapping(path = {"/dynamic.js"}, method = RequestMethod.GET, produces = "application/javascript")
@ResponseStatus(value = HttpStatus.OK)
@ResponseBody
public String dynamicJS(HttpServletRequest request) {

        return "Your javascript code....";

}


  

"message"라는 이름의 요청 속성을 가정할 때:

request.setAttribute("message", "this is my message");

Tymeleaf 템플릿을 사용하여 html 페이지에서 읽으려면:

<script>
  var message = "[[${message}]]";
  alert(message);
</script>

언급URL : https://stackoverflow.com/questions/25687816/setting-up-a-javascript-variable-from-spring-model-by-using-thymeleaf