文章出處

前面記錄了 thymeleaf 基本表達式, 這里繼續看一下其他功能.

一. 設置屬性值

 這里的controller, html框架 還是沿用上一篇的部分.

html:

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">設置屬性值</h3>
    </div>
    <div class="panel-body">
        <!--從自定義屬性這里看, html所有的屬性, 都可以通過 th:屬性名=的方式來寫-->
        <p th:elvin="${book.name}">1.自定義屬性 th : elvin</p>

        <!--attr設置屬性
        attr可以設置任何屬性值, 但是一般不會用它設置所有屬性值-->
        <p th:attr="elvin=${book.name},title=${book.name}">2.attr設置屬性值</p>

        <!--一般html原來的屬性, 通過 th : 屬性名 的方式來使用
        設置多個屬性: th : alt-title, th : lang-xmllang -->
        <p th:title="${book1.name}">3.html原來的屬性</p>
        <!--對于checked, disabled 這種的, 其判斷值的方式和 if 的方式一致, 具體在if中詳述 -->
        <input type="checkbox" th:checked="${book.price % 2 == 0}" th:disabled="${book.price % 2 == 0}" />a
        <input type="checkbox" th:checked="1" th:disabled="${book.price % 2 gt 0}" />b
        <input type="checkbox" th:checked="no" />c

        <!--classappend:可以添加class,而不會刪除之前的class
        styleappend:可以添加樣式,不會刪除之前的樣式,但是效果上會覆蓋之前的樣式-->
        <p class="pc" th:classappend="cp" style="border: 1px solid blue;background-color:red;"
           th:styleappend="'background-color:#82af86;'">4.追加class和style</p>

        <!--attrappend:在原有基礎的后面添加屬性值
        attrprepend:在原有的基礎的前面插入屬性值-->
        <p title="原來的title" th:attrappend="title=' 添加的title'" th:attrprepend="title='最前面的title '">5.前置,后置添加屬性值</p>

        <!--雖然這里提供了事件設置的方式, 但是個人建議, 將事件綁定分離出去-->
        <p th:onclick="|console.log('${book.publishTime}')|">6.設置事件屬性</p>

    </div>
</div>

 

結果展示:

 

二. 條件運算

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">條件運算</h3>
    </div>
    <div class="panel-body">
        <!--
           這里的 if判斷 作用有點類似javscript里面的if
           判斷通過的條件:
               1.表達式的值不為null
               2.如果為布爾值, 且為true : th:if="true"
               3.不為0的數字, 負數也判定通過
               4.不為'0'的字符
               5.不為:"false","off","no"的字符串
       -->
        <!--這里的if unless 其實就相當于是 if else-->
        <p th:if="${book.price > 10000}" th:text="|本書單價為:${book.price / 100}元, 有點小貴|"></p>
        <p th:unless="${book.price > 10000}" th:text="|本書單價為:${book.price / 100}元, 價格可以接受|"></p>

        <p th:switch="${book.price}">
            <span th:case="100" th:text="1塊錢"></span>
            <span th:case="${book.price}" th:text="${book.price / 100} + '元'"></span>
            <span th:case="*" th:text="居然都不是, 只能選這個了"></span>
        </p>
    </div>
</div>

if 和 unless 是相反的, 所以如果只有一個 if , unless確實可以當成是if對應的else來使用. 當然, 如果是 if - else if - else if - else也是可以實現的, 但是要嵌套進去, 不方便閱讀. 就不寫了.

switch里面, case="*" 相當于java里面的default, 只要有一個滿足條件, 別的都不會再顯示和判斷了.

結果展示:

 

三. 遍歷

 數據準備: 在原來controller的方法下面繼續添加

List<Book> bookList = new ArrayList<>();
bookList.add(book);
bookList.add(book1);
bookList.add(new Book("bootstrap", new DateTime().toString("yyyy-MM-dd"), 11000L));
bookList.add(new Book("javascript", new DateTime().toString("yyyy-MM-dd"), 1020L));

model.addAttribute("bookList", bookList);

Map<String, Book> map = new HashMap<>();
String pre = "index_";

for (int i = 0; i < bookList.size(); i++) {
    map.put(pre + i, bookList.get(i));
}

model.addAttribute("bookMap", map);

html:

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">列表List</h3>
    </div>
    <div class="panel-body">
        <ul class="list-group">
            <!--循環方法
                這里的item,自命名的,就相當于 bookList.get(index)
                iterInfo,自命名的, 是單條數據的補充信息, 比如里面有 索引。
                each可以迭代的對象:
                    1. 任何實現java.util.Iterable接口的對象
                    2. 任何實現java.util.Enumeration接口的對象
                    3. 任何實現java.util.Iterator接口的對象, 其值將被迭代器返回,而不需要再內存中緩存所有值
                    4. 任何實現java.util.Map的接口對象. 迭代時, iter變量將是 Entry類
                    5. 任何數組
                    6. 任何其將被視為包含對象本身的單值列表
            -->
            <li class="list-group-item" th:each="item,iterInfo:${bookList}">
                <span th:text="'index:' + ${iterInfo.index}"></span>
                <span th:text="'size:' + ${iterInfo.size}" style="margin-left:10px;"></span>
                <span th:text="'count:' + ${iterInfo.count}" style="margin-left:10px;"></span>
                <span th:text="'odd:' + ${iterInfo.odd}" style="margin-left:10px;"></span>
                <span th:text="'even:' + ${iterInfo.even}" style="margin-left:10px;"></span>
                <span th:text="'first item:' + ${iterInfo.first}" style="margin-left:10px;"></span>
                <span th:text="'last item:' + ${iterInfo.last}" style="margin-left:10px;"></span>
                <span th:text="${item.name}" style="margin-left:10px;"></span>
                <span th:text="${item.price} + '分'" style="margin-left:10px;"></span>
                <span th:text="${item.publishTime}" style="margin-left:10px;"></span>
            </li>
        </ul>
    </div>
</div>

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">列表Map</h3>
    </div>
    <div class="panel-body">
        <ul class="list-group">
            <!--循環方法
                這里的item,自命名的,就相當于 bookList.get(index)
                iterInfo,自命名的, 是單條數據的補充信息, 比如里面有 索引。
                each可以迭代集合, 數組, Map(iter變量將是 Entry 類)
            -->
            <li class="list-group-item" th:each="item,iterInfo:${bookMap}">
                <span th:text="'index:' + ${iterInfo.index}"></span>
                <span th:text="'size:' + ${iterInfo.size}" style="margin-left:10px;"></span>
                <span th:text="'count:' + ${iterInfo.count}" style="margin-left:10px;"></span>
                <span th:text="'odd:' + ${iterInfo.odd}" style="margin-left:10px;"></span>
                <span th:text="'even:' + ${iterInfo.even}" style="margin-left:10px;"></span>
                <span th:text="'first item:' + ${iterInfo.first}" style="margin-left:10px;"></span>
                <span th:text="'last item:' + ${iterInfo.last}" style="margin-left:10px;"></span>

                <span th:text="${item.key}" style="margin-left:10px;"></span>
                <span th:text="${item.value.name}" style="margin-left:10px;"></span>
                <span th:text="${item.value.price} + '分'" style="margin-left:10px;"></span>
                <span th:text="${item.value.publishTime}" style="margin-left:10px;"></span>
            </li>
        </ul>
    </div>
</div>

結果展示:

 

四. 局部變量

在each中,  item:${list}, 這個item, 其實就是一個局部變量. 

但是如果要定義自己的局部變量, 怎么操作呢.

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">局部變量</h3>
    </div>
    <div class="panel-body">
        <!--1. 先來個簡單的-->
        <p th:with="first='123abc'" th:text="${first}"></p>
        <!--2. 這里two在前面, 如果從前往后, 肯定會報錯, 這里能正常顯示, 說明標簽間有優先級-->
        <p th:text="${two.name}" th:with="two=${book}"></p>
        <!--3.多個變量的時候-->
        <p th:with="name=${book.name}, price=${book.price}" th:text="|${name} : ${price}|"></p>
    </div>
</div>

結果展示:

 

五. 優先級

在上一part中, 發現了, 在同一個tag中, th:with 和 th:text 的順序并不影響解析結果. 這肯定是有一個優先級順序在里面

優先級從上往下, 逐漸變小

Order Feature Attributes
1 Fragment inclusion th:insert   th:replace
2 Fragment iteration th:each
3 Conditional evaluation

th:if   th:unless

th:switch  th:case
4 Local variable definition th:object  th:with
5 General attribute modification th:attr   th:attrprepend  th:attrappend
6 Specific attribute modification th:value  th:href  th:src ...
7 Text(tag body modification) th:text   th:utext
8 Fragment specification th:fragment
9 Fragment removal th:remove

 

六. th:remove

這里remove沒有出現過, 正好在這里就看一下, remove 具體是要刪除什么

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">remove</h3>
    </div>
    <div class="panel-body">
        <ul class="list-group" th:msg="all" th:remove="all">
            <li>all-1</li>
            <li>all-2</li>
        </ul>
        <ul class="list-group" th:msg="body" th:remove="body">
            <li>body-1</li>
            <li>body-2</li>
        </ul>
        <div class="list-group" th:msg="tag" th:remove="tag">
            <ul>
                <li>tag-1</li>
                <li>tag-2</li>
            </ul>
        </div>
        <div class="list-group" th:msg="all-but-first" th:remove="all-but-first">
            <p>all-but-first-1</p>
            <p>all-but-first-2</p>
        </div>

        <div class="list-group" th:msg="none" th:remove="none">
            <p>none-1</p>
            <p>none-2</p>
        </div>
    </div>
</div>

結果展示:

all: 將所有的都刪除掉了, 仿佛沒有出現過

body: 刪除標簽內部的內容

tag: 刪除標簽, 但是保留子項

all-but-first: 刪除除第一個以外的所有后代

none: 什么都不做

 

七. 內聯語法

其實這個在上一篇已經出現過. 內聯語法, 主要是在模板中, 或者css, js中使用.

thymeleaf除了可以通過標簽來使用變量, 還可通過[[${...}]]的方式來使用. 

1. 在css中, 想要使用變量

 <style th:inline="css">
        /*通過[ [ $ { }]]的方式訪問model中的屬性*/
        .bgcolor {
            background-color: [[${color}]]
        }
 </style>

2. 在js中, 使用

<script th:inline="javascript">
    $(function () {
        var book = [[${book}]];
        console.log(book.name);
    });</script>

3. 在html中使用

  <p th:inline="text">買了一本書:[[${book.name}]], 花了[[${book.price/100}]]塊錢</p>

不建議在標簽內容里面這么寫, 當然, 不利于原型的展示. 

4. 禁用[[${...}]]

<p th:inline="none">買了一本書:[[${book.name}]], 花了[[${book.price/100}]]塊錢</p>

Demo:

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title">內聯語法</h3>
    </div>
    <div class="panel-body">
        <!--1. css中使用-->
        <style th:inline="css">
            .color{
                background-color: [[${color}]];
            }
        </style>

        <!--2. html 標簽內部使用-->
        <p th:inline="text" class="color">買了一本書:[[${book.name}]], 花了[[${book.price/100}]]塊錢</p>

        <!--3. html標簽內部禁用-->
        <p th:inline="none">買了一本書:[[${book.name}]], 花了[[${book.price/100}]]塊錢</p>

        <!--4. javascript中使用-->
        <script th:inline="javascript">
            var book = [[${book1}]];
            console.log(book);

            [# th:each="item:${bookList}"]
                console.log([[${item}]]);
            [/]
        </script>
    </div>
</div>

 

結果展示:

這里有個 [# ] [/] , 可以當成是 標簽 來用. 是thymeleaf提供的

 


文章列表



Avast logo

Avast 防毒軟體已檢查此封電子郵件的病毒。
www.avast.com


arrow
arrow
    全站熱搜
    創作者介紹
    創作者 大師兄 的頭像
    大師兄

    IT工程師數位筆記本

    大師兄 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄