Thymeleaf 與 Javascript

在 javascript 代碼中使用 Thymeleaf 模板引擎:javascript

<script th:inline="javascript"> $("#content").html( "<select name='status'>"+ " <option value=''>[[#{admin.common.choose}]]</option>"+ " <option value="+[[${status}]]+">[[#{'Order.Status.' + ${value}}]]</option>"+ "</select>"); </script>

script 標籤中的 th:inline="javascript" 屬性值表示能夠使用內聯 js ,便可以在 js 代碼中使用 [[]] 取值:css

var user = [[${user}]];

以上是在 Javascript 代碼中使用 Thymeleaf 模板引擎的簡單示例,但有時也會遇到不可解決或者說很難解決的問題。例如,若是要在 js 代碼中輸出一個段 html 代碼,而且要在 html 代碼中做循環操做,而 html 自己並無提供這種功能的實現,這時要使用 Thymeleaf 的 th:each 屬性,可是如何使用 th:each 在 js 中實現? 這時就不能像上面那樣的使用字符串拼接內聯 js 來實現了,由於 th:xx 是要做爲標籤的屬性放在標籤內部的,js 解析不了。解決的方案是將 html 代碼放在一個使用 text/html 解析的 script 標籤中,這樣就會使用 html 的解析方式來解析這些代碼,示例以下:html

<script type="text/html" id="thymeleafTable"> <table> <tr> <th th:text="#{Order.type}"></th> <td> <select name="type"> <option value="" th:text="#{admin.common.choose}"></option> <option th:each="value : ${types}" th:value="${value}" th:attr="selected = ${value == type} ? 'selected' : ''" th:text="#{'Order.Type.' + ${value}}"></option> </select> </td> </tr> </table> </script> 

而後在 js 代碼中使用腳本的 id 來調用該腳本:java

$("#content").html($("#thymeleafTable").html()); 

text/csstext/htmltext/javascript 等屬性值規定腳本的 MIME 類型,它表示瀏覽器的解釋方式,例如,text/javascript 告訴瀏覽器按照 Javascript 來解析執行。django

相關文章
相關標籤/搜索