[SPRING] Thymeleaf-Javascript 코드 내에서 모델 속성을 반복

Thymeleaf-Javascript 코드 내에서 모델 속성을 반복

모델 속성을 사용해야하는 Javascript 코드를 작성하려고합니다. 스크립트 태그를 정의하는 방법은 다음과 같습니다.

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

    //need some loops

    /*]]>*/
</script>

내가해야 할 것은 스크립트 내의 모델 속성에 대한 각 반복을 사용하는 것입니다. 지금까지 나는 th : each 로이 작업을 수행 할 수 없었습니다. 도움을 주시면 감사하겠습니다.

해결법

1. ==============================

   1.[[$ {modelAttribute}]]와 같이 모델 속성을 이중 괄호로 묶어야한다고 생각합니다. Thymeleaf 문서의 스크립트 인라인 섹션은 약간 도움이 될 수 있습니다. http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#script-inlining-javascript-and-dart

   [[$ {modelAttribute}]]와 같이 모델 속성을 이중 괄호로 묶어야한다고 생각합니다. Thymeleaf 문서의 스크립트 인라인 섹션은 약간 도움이 될 수 있습니다. http://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html#script-inlining-javascript-and-dart

   <script type="text/javascript" th:inline="javascript">
       /*<![CDATA[*/
   
       var theList = [[${modelAttribute}]]
       for (i = 0; i < theList.length; i++) {
           doSomething(theList[i]);
       }
   
       /*]]>*/
   </script>
   

2. ==============================

   2.당신은 또한 이것을 할 수 있습니다.

   당신은 또한 이것을 할 수 있습니다.

   @Controller에서 :

   model.addAttribute("items", new String[] { "item1", "item2", "item3" });
   

   템플릿에서 :

   <script type="text/javascript" th:inline="javascript">
   
   var items = [];
   
   /*[# th:each="n : ${items}"]*/
   
   items.push("[(${n})]");
   
   /*[/]*/
   
   </script>
   

   다른 유용한 것들이 여기에 설명되어 있습니다 : [MAJOR FEAT] 텍스트 템플릿 모드를위한 새로운 구문 # 395

3. ==============================

   3.백리향 3-> yglodt 답변 참조

   백리향 3-> yglodt 답변 참조

   Thymeleaf 2에 갇혀 있고 모델 속성이 복잡한 경우 (Maxim Laval의 경우와 같이) 스크립트를 반복했습니다.

   <script th:inline="javascript">
     var dataLayer = [];
   </script>
   <script th:each="item:${items}" th:inline="javascript">
     dataLayer.push({'attr1':item.attr1, 'attr2':item.attr2, 'attr3':item.attr3});
   </script>
   <script th:inline="javascript">
     console.log(dataLayer); // do whatever you want with dataLayer...
   </script>
   

   별로 좋지는 않지만 Google 웹 로그 분석을 더 잘 찾을 수 없었습니다.

4. ==============================

   4.이것은 / * [[$ {name}]] * /를 추가하여 최신 버전의 thymeleaf에서 작동합니다.

   이것은 / * [[$ {name}]] * /를 추가하여 최신 버전의 thymeleaf에서 작동합니다.

   <script type="text/javascript" th:inline="javascript">
       /*<![CDATA[*/
   
       var theList = /*[[${modelAttribute}]]*/
       for (i = 0; i < theList.length; i++) {
           doSomething(theList[i]);
       }
   
       /*]]>*/
   </script>
   

5. ==============================

   5.Thymeleaf 2에 갇힌 경우 또 다른 방법은 Script-Tag 내의 "th : block"-요소를 사용하지 않는 것입니다

   Thymeleaf 2에 갇힌 경우 또 다른 방법은 Script-Tag 내의 "th : block"-요소를 사용하지 않는 것입니다

   <script type="text/javascript">
           var arrayOfIds= [
           <th:block th:each="element: ${list}" th:inline="text">[[${element.Id}]],</th:block>
               -1 
           ];
           arrayOfIds.pop(); // Remove the superflous last Element
       </script>
   

from https://stackoverflow.com/questions/29799493/thymeleaf-iterating-over-a-model-attribute-inside-javascript-code by cc-by-sa and MIT license