6.2 保持遍历状态

当使用th:each时，Thymeleaf提供了一种有用的机制来跟踪遍历的状态：状态变量。

状态变量定义在th:each属性里，并包含以下数据：

  • 当前的遍历索引，从0开始。此为index属性。
  • 当前的遍历索引，从1开始。此为count属性。
  • 被遍历变量里的元素数量。此为size属性。
  • 每次遍历的遍历变量。此为current属性。
  • 当前的遍历是偶数次还是奇数次。此为even/odd布尔属性。
  • 当前是否为首次遍历。此为first布尔属性。
  • 当前是否为最后一次遍历。此为last布尔属性。

让我们看看怎么在之前的例子里使用它：

  1. <table>
  2.   <tr>
  3.     <th>NAME</th>
  4.     <th>PRICE</th>
  5.     <th>IN STOCK</th>
  6.   </tr>
  7.   <tr th:each="prod,iterStat : ${prods}" th:class="${iterStat.odd}? 'odd'">
  8.     <td th:text="${prod.name}">Onions</td>
  9.     <td th:text="${prod.price}">2.41</td>
  10.     <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
  11.   </tr>
  12. </table>

状态变量（此例子里的iterStat）定义在th:each属性里，跟在遍历变量后面，由逗号分隔。就像遍历变量一样，状态变量的作用范围也是在由持有th:each属性的标签定义的代码片段之上。

让我们看一下处理我们的模版的结果：

  1. <!DOCTYPE html>
  3. <html>
  5.   <head>
  6.     <title>Good Thymes Virtual Grocery</title>
  7.     <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
  8.     <link rel="stylesheet" type="text/css" media="all" href="/gtvg/css/gtvg.css" />
  9.   </head>
  11.   <body>
  13.     <h1>Product list</h1>
  15.     <table>
  16.       <tr>
  17.         <th>NAME</th>
  18.         <th>PRICE</th>
  19.         <th>IN STOCK</th>
  20.       </tr>
  21.       <tr class="odd">
  22.         <td>Fresh Sweet Basil</td>
  23.         <td>4.99</td>
  24.         <td>yes</td>
  25.       </tr>
  26.       <tr>
  27.         <td>Italian Tomato</td>
  28.         <td>1.25</td>
  29.         <td>no</td>
  30.       </tr>
  31.       <tr class="odd">
  32.         <td>Yellow Bell Pepper</td>
  33.         <td>2.50</td>
  34.         <td>yes</td>
  35.       </tr>
  36.       <tr>
  37.         <td>Old Cheddar</td>
  38.         <td>18.75</td>
  39.         <td>yes</td>
  40.       </tr>
  41.     </table>
  43.     <p>
  44.       <a href="/gtvg/" shape="rect">Return to home</a>
  45.     </p>
  47.   </body>
  49. </html>

注意：我们的遍历状态变量完美地工作了，只在奇数行上建立了oddCSS类。

如果你不明确地设置一个状态变量，Thymeleaf总是会通过在遍历变量的名字后加上后缀Stat为你创建一个状态变量：

  1. <table>
  2.   <tr>
  3.     <th>NAME</th>
  4.     <th>PRICE</th>
  5.     <th>IN STOCK</th>
  6.   </tr>
  7.   <tr th:each="prod : ${prods}" th:class="${prodStat.odd}? 'odd'">
  8.     <td th:text="${prod.name}">Onions</td>
  9.     <td th:text="${prod.price}">2.41</td>
  10.     <td th:text="${prod.inStock}? #{true} : #{false}">yes</td>
  11.   </tr>
  12. </table>