thymeleaf 需要注意的地方 [[]]、th:inline="javascript"
1、[[...]] 在 Thymeleaf 中認為是內聯表示式
2、th:inline="text/javascript/css/none"
3、註釋 /*<![CDATA[*/ ... /*]]>*/
1、[[...]] 在 Thymeleaf 中認為是內聯表示式
<p>[[${session.user.name}]]!</p>等同於: <p><span th:text="${session.user.name}"></span>!</p>
注意: 使用內聯樣式之前,我們需要必須先用 th:inline="text/javascript/none" 明確啟用此模式。
<body/>中不啟用預設以字串形式輸出,而javascript必須啟用才能使用[ [] ]。
[[...]] --> /*[[...]] */
<script th:inline="javascript">
...
var username = [[${session.user.name}]];
...
</script>
輸出結果:
<script th:inline="javascript"> ... var username = "Sebastian \"Fruity\" Applejuice"; ... </script>
JavaScript內聯不僅會輸出所需的文字,而且還會用引號和JavaScript來包含它 - 轉義其內容,以便將表示式結果輸出為格式良好的JavaScript文字。
發生這種情況是因為我們將${session.user.name}
表示式輸出為轉義,如果相反,我們使用非轉義
<script th:inline="javascript">
...
var username = [(${session.user.name})];
...
</script>
輸出結果:
<script th:inline="javascript"> ... var username = Sebastian "Fruity" Applejuice; ... </script>
...這是一個格式錯誤的JavaScript程式碼。但是,如果我們通過附加內聯表示式來構建指令碼的一部分,那麼輸出未轉義的內容可能就是我們所需要的,因此最好有這個工具。
JavaScript自然模板:在JavaScript註釋中包裝我們的(轉義的)內聯表示式
<script th:inline="javascript">
...
var username = /*[[${session.user.name}]]*/ "Gertrud Kiwifruit";
...
</script>
輸出結果:
<script th:inline="javascript">
...
var username = "Sebastian \"Fruity\" Applejuice";
...
</script>
Thymeleaf 將忽略我們在註釋之後和分號之前(在這種情況下'Gertrud Kiwifruit'
)編寫的所有內容。
請注意這是有效的JavaScript程式碼。當您以靜態方式開啟模板檔案時(無需在伺服器上執行),它將完美執行。所以我們這裡有一個做自然模板的方法!
2、th:inline="text/javascript/css/none"
2.1、th:inline="css"
css內聯,明確啟用此模式
假如我們定義倆個變數:
classname = 'main elems'
align = 'center
<style th:inline="css">
.[[${classname}]] {
text-align: [[${align}]];
}
</style>
具體來說,通過轉義表示式輸出的表示式[[${classname}]]
將作為CSS識別符號進行轉義。
2.2、th:inline="text"
文字內聯,明確啟用此模式
2.3、th:inline="/javascript"
JavaScript內聯,明確啟用此模式
2.4、th:inline="none"
禁用內聯,明確啟用此模式
3、註釋 /*<![CDATA[*/ ... /*]]>*/
/*<![CDATA[*/ ... /*]]>*/ 為了相容支援xml文件和不支援xml(即只支援html文件)文件的瀏覽器而設計的。
在支援xml文件中雖然用' /* */' 註釋掉程式碼但xml文件中仍可識別出屬於xml的程式碼<![CDATA[ 和 ]]>,所以程式碼中有大於'>'小於'<'之類的特殊字元不會發生錯誤,因為在xml文件中這些都是特殊字元。
而不支援xml文件中,這些大於小於號就不是特殊字元了,由於<![CDATA[ 和 ]]>是xml程式碼所以不註釋掉就會發生錯誤。
所以上述設計達到了相容支援xml文件和不支援xml文件的要求。
通常 CDATA 裡面放一些‘一字不改的資料’,比如原始碼,比如Javascript原始碼。