thymeleaf的內聯th:inline(在javascript訪問model中的數據)


thymeleaf模板引擎為前端數據的獲取提供了較大的便利,在html標簽內可通過th標簽加${}表達式訪問model里的對象數據。但如果不想通過th標簽而是簡單地訪問model對象數據,或是想在javascript代碼塊里訪問model中的數據,則要使用內聯的方法。

  比如,我們可以這樣訪問對象:

<p>Hello, [[${session.user.name}]]!</p>
  以上代碼可以取代下面的一般寫法:

<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>
  Expressions between [[...]] or [(...)] are considered inlined expressions in Thymeleaf。即使用此語法的語句稱為“內聯”。使用內聯的語句的確會更加簡潔一些。

  若是想在javascript代碼塊內直接地使用model的對象值,則必須通過內聯來實現。代碼如下:

<script type="text/javascript" th:inline="javascript">
/*<![CDATA[*/
var max = /*[[${maxSumOfDateInYear}]]*/ 20;
alert(max);
/*]]>*/
</script>
  其中第2、5行為基於XML的轉義寫法,第3行把內聯訪問的語句用注釋引起來,且后面跟着一個空格20,是指若不存在此對象,則自動設置默認值為20。

  注意以上的javascript內聯寫法是基於你需要“直接地”使用model對象值的場景。否則還有其它寫法,比如簡單地聲明一個hidden input:

<input type="hidden" id="maxSumOfDateInYear" th:value="${maxSumOfDateInYear}"/>
<script type="text/javascript" th:inline="none">
var max = $("#maxSumOfDateInYear").val();
var data = [["2012-05-07", 6], ["2012-04-16", 4]];
alert(max);
alert(data);
</script>
  以上第1行聲明了一個hidden的maxSumOfDateInYear,然后第3行通過jQuery來間接訪問。

  注意,若在thymeleaf代碼里存在第4行的二維數組字面量的寫法,則必須要把javascript代碼塊設置為inline為none的,否則thymeleaf引擎會把此數組的[[也當成了內聯語句處理,從而導致后端報錯An error happened during template parsing。要么,你就還是通過hidden間接訪問的方式實現。

  或者,也可以通過ajax直接獲取內容來實現。但這就屬與thymeleaf模板引擎計算過程無關了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM