1. 程式人生 > >thymeleaf 需要注意的地方 [[]]、th:inline="javascript"

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原始碼。