Thymeleaf 學習筆記 (5)

 

相似於 EL 表達式的行內變量在 js 文件中的使用

Thymeleaf 在 js中，能夠動態的替換變量的值，支持將一個對象轉爲 json 對象賦予 js 的變量。同時完美支持靜態模式顯示和解析時替換變量值。

使用方式：在 script 標籤上增長 th:inline="javascript"屬性。

一、在 html 之外的其餘文本文件中，使用雙方括號(下面還有一個雙括號裏面套圓括號的形式)表達式，這種語法模式是開啓的，不須要作任何設置。

 

[[${session.user.name}]] 格式的變量模板處理時會轉譯的內容，例如轉譯 html 標籤或者是一些文本在字面量中須要轉譯的符號。
[(${session.user.name})] 格式的變量模板處理時不轉譯內容，直接將值貼到變量的位置上。

可是若是咱們直接放到文件中的話可能就會在靜態頁面看的時候就會比較醜，對於html ，咱們能夠用一個 span來給一個靜態模式下看起來舒服的內容。

 

 

<p>Hello, <span th:text="${session.user.name}">Sebastian</span>!</p>

ps：在 js 文件中，下面會講到咱們將會使用註釋解決這個問題。

例子：

 

 

<script th:inline="javascript">
    ...
    var username = [[${session.user.name}]];
    ...
</script>

結果：

 

 

<script th:inline="javascript">
    ...
    var username = "Sebastian \\"Fruity\\" Applejuice";
    ...
</script>

上面的例子中，模板引擎作了兩件重要的事情 ，首先不是直接輸出了變量的內容，它還自動添加了雙引號，讓這個 js 最終的結果保證了語法上沒有錯誤。其次，字符串中的雙引號被自動的轉譯。

若是將雙中括號改成一箇中括號一個圓括號，那麼將不會自動增長雙引號和轉譯變量中的特殊字符。

爲了保證在靜態的瀏覽模式下能夠正常查看，可使用 js 的普通註釋將變量註釋起來，而後在註釋外加入一個靜態的值，例以下面這個樣子：

 

 

<script th:inline="javascript">
    ...
    var username = /*[[${session.user.name}]]*/ "Gertrud Kiwifruit";
    ...
</script>

二、js 中Thymeleaf 不只能處理 String 類型的變量，並且同時也能處理其餘常見類型：

 

 

• Strings


• Numbers


• Booleans


• Arrays


• Collections


• Maps


• Beans (objects with getter and setter methods)



 
•  

例如咱們放了一個對象給變量：

 

 

<script th:inline="javascript">
    ...
    var user = /*[[${session.user}]]*/ null;
    ...
</script>

引擎處理後，將會產生一個 json 對象以下，嗯，底層使用的是 jackson 的庫。

 

 

<script th:inline="javascript">
    ...
    var user = {"age":null,"firstName":"John","lastName":"Apricot",
                "name":"John Apricot","nationality":"Antarctica"};
    ...
</script>

下一篇介紹普通文本模式的模板中，如何使用 Thymeleaf 邏輯判斷，敬請期待。