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模板引擎計算過程無關了。