การตั้งค่าตัวแปร JavaScript จาก Spring model โดยใช้ Thymeleaf

ฉันใช้ Thymeleaf เป็นเครื่องมือแม่แบบ ฉันจะส่งตัวแปรจาก Spring model ไปยังตัวแปร 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}]];
  

• หรือในความคิดเห็นเพื่อให้มีรหัส JavaScript ที่ถูกต้องเมื่อคุณเปิดไฟล์เทมเพลตของคุณในลักษณะคงที่ (โดยไม่ต้องดำเนินการที่เซิร์ฟเวอร์)

  Thymeleaf เรียกสิ่งนี้ว่าเทมเพลตธรรมชาติของ JavaScript

  ข้อความ var = / * [[$ {message}]] * / "";
  

  Thymeleaf จะเพิกเฉยต่อทุกสิ่งที่เราเขียนหลังจากความคิดเห็นและก่อนอัฒภาค

ข้อมูลเพิ่มเติม: http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining

ตามเอกสารประกอบมีหลายวิธีในการทำซับใน
วิธีที่ถูกต้องคุณต้องเลือกตามสถานการณ์

1) เพียงแค่ใส่ตัวแปรจากเซิร์ฟเวอร์ไปยังจาวาสคริปต์:

<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 ภายในวิธีการเรียก Java ภายในเทมเพลต (ฉันเดาไม่ได้)

ตรวจสอบให้แน่ใจว่าคุณมีไทม์ลีฟอยู่แล้ว

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

หากคุณต้องการแสดงตัวแปรของคุณโดยไม่ใช้ Escape ให้ใช้รูปแบบนี้:

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

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

/*]]>*/
</script>

สังเกต[(วงเล็บที่ห่อตัวแปร