6）Thymelead th:with 局部变量与属性优先级和 Thymeleaf 注释

爱被打了一巴掌 2022-04-12 12:54 183阅读 0赞

**目录**

局部变量

编码示例

属性优先级

Thymeleaf 注释

ThymeLeaf 解析器级注释

Thymeleaf 专有注释

--------------------

# 局部变量 #

如同 JSP 中 JSTL 的 <c:set var="j" value="$\{1\}"/> 标签可以用于设置变量值和对象属性一样，Thymeleaf 中可以使用 th:with 进行指定局部变量，局部变量是指定义在模版⽚段中的变量，并且该变量的作⽤域为所在的模版⽚段。

> <tr th:each="user : $\{userList\}">   ...   </tr>

1）如上所示 th:each 迭代中的 user 其实就是局部变量，仅在 <tr> 标签范围内可⽤，包括所有子元素，可⽤于在该标签中执⾏优先级低于 th:each 的任何其他 th:\* 属性。  
     Thymeleaf 提供 th:with 属性声明局部变量，其语法与属性值分配类似：

> <div th:with="firstPer=$\{persons\[0\]\}">  
>    <p>The name of the first person is <span th:text="$\{firstPer.name\}">Julius Caesar</span>.</p>  
> </div>

当 th:with 被处理时，firstPer 变量被创建为局部变量并被添加到来⾃上下⽂ map 中，以便它可以与上下⽂中声明的任何其他变量⼀起使⽤，但只能在包含的 <div> 标签内使⽤。

2）可以使用同时定义多个变量，用逗号隔开：

> <div th:with="firstPer=$\{persons\[0\]\},secondPer=$\{persons\[1\]\}">  
>    <p>The name of the first person is <span th:text="$\{firstPer.name\}">Julius Caesar</span>.</p>  
>    <p>But the name of the second person is<span th:text="$\{secondPer.name\}">Marcus Antonius</span>.</p>  
> </div>

3） th:with 属性允许重⽤在同⼀属性中定义的变量：

> <div th:with="company=$\{user.company + ' Co.'\},account=$\{accounts\[company\]\}">...</div>

## 编码示例 ##

<body th:with="userName='Admin'">
    <p>当前登录用户：<span th:text="${userName}"></span></p>
    
    
    <div th:with="userFirst=${userList[0]}">
        <p>我：<span th:text="${userFirst}"></span></p>
    </div>
    
    
    
    
    
    <div th:with="withId=${id},withInfo=${info},isMarry=${isMarry}">
        <p>withId：<span th:text="${withId}"></span></p>
        <p>withInfo：<span th:text="${withInfo}"></span></p>
        <p>isMarry：<span th:text="${isMarry}"></span></p>
        <p></p>
    </div>
    
    
    <div th:with="id=9527,flag=${id}+'_flag'">
        <p>id：<span th:text="${id}"></span></p>
        <p>flag：<span th:text="${flag}"></span></p>
    </div>
    </body>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

# 属性优先级 #

当在同⼀个标签中写⼊多个 th:\* 属性时会发⽣什么？ 例如：

> <ul>  
>    <li th:each="item : $\{items\}" th:text="$\{item.description\}">Item description here...</li>  
> </ul>

期望是 th:each 属性在 th:text 之前执⾏，以便得到想要的结果，但是 HTML / XML 标准对于标签属性的渲染顺序没有任何定义， 因此 Thyme Leaf 如果要达到这种效果，必须在属性本身中建⽴优先机制，以确保这些属性按预期⼯作。因此，所有的Thymeleaf 属性都定义⼀个数字优先级，以便确定在标签中按顺序执⾏。优先级清单如下：

<table> 
 <tbody> 
  <tr> 
   <td style="width:132px;"><strong>Order（顺序）</strong></td> 
   <td style="width:355px;"><strong>Feature（特征）</strong></td> 
   <td style="width:368px;"><strong>Attributes（属性）</strong></td> 
  </tr> 
  <tr> 
   <td style="width:132px;">1</td> 
   <td style="width:355px;">Fragment inclusion</td> 
   <td style="width:368px;">th:insert 、th:replace</td> 
  </tr> 
  <tr> 
   <td style="width:132px;">2</td> 
   <td style="width:355px;">Fragment iteration</td> 
   <td style="width:368px;">th:each</td> 
  </tr> 
  <tr> 
   <td style="width:132px;">3</td> 
   <td style="width:355px;">Conditional evaluation</td> 
   <td style="width:368px;">th:if 、th:unless、th:switch、 th:case</td> 
  </tr> 
  <tr> 
   <td style="width:132px;">4</td> 
   <td style="width:355px;">Local variable definition</td> 
   <td style="width:368px;">th:object 、th:with</td> 
  </tr> 
  <tr> 
   <td style="width:132px;">5</td> 
   <td style="width:355px;">General attribute modification</td> 
   <td style="width:368px;">th:attr、 th:attrprepend、th:attrappend</td> 
  </tr> 
  <tr> 
   <td style="width:132px;">6</td> 
   <td style="width:355px;">Specific attribute modification</td> 
   <td style="width:368px;">th:value、 th:href、 th:src...</td> 
  </tr> 
  <tr> 
   <td style="width:132px;">7</td> 
   <td style="width:355px;">Text (tag body modification)</td> 
   <td style="width:368px;">th:text 、th:utext</td> 
  </tr> 
  <tr> 
   <td style="width:132px;">8</td> 
   <td style="width:355px;">Fragment specification</td> 
   <td style="width:368px;">th:fragment</td> 
  </tr> 
  <tr> 
   <td style="width:132px;">9</td> 
   <td style="width:355px;">Fragment removal</td> 
   <td style="width:368px;">th:remove</td> 
  </tr> 
 </tbody> 
</table>

这个优先机制意味着与属性位置并无关系，只与属性名有关：

> <ul>  
>    <li th:each="item : $\{items\}" th:text="$\{item.description\}">Item description here...</li>  
> </ul>
> 
> 等价于
> 
> <ul>  
>    <li th:text="$\{item.description\}" th:each="item : $\{items\}">Item description here...</li>  
> </ul>

# Thymeleaf 注释 #

## ThymeLeaf 解析器级注释 ##

标准 HTML/XML 注释 <!- ... - > 可以在 Thymeleaf 模板中的任何地⽅使⽤，这些注释中的所有内容都不会被 Thymeleaf 处理，并将逐字复制到结果中。

Thymeleaf 解析器级注释块被解析时，Thymeleaf 直接将它们从模板中删除。也就说是通过 ThymeLeaf 渲染时，在浏览器 F12 也将无法再看到被注释内容。

格式如下：

> **格式1**：
> 
>  
> 
> **格式2**：
> 
>   
> <div> you can see me only before Thymeleaf processes me!</div>
> 
> <div> you can see me only before Thymeleaf processes me!</div>  
>

1）格式1 中 显然就是在 html 注释的基础上加了 /\* 与 \*/ ，这意味着使用 Thymeleaf 渲染访问时，浏览器 F12 无法看到被注释的内容，但是如果不通过 Thyneleaf 渲染，而是以原型访问时，浏览器 F12 可以看到被注释的内容。

2）格式2 中，使用 Thymeleaf 渲染访问时，浏览器不显示被注释的内容（因为被删除了），F12 也无法看到被注释的内容，但是如果不通过 Thyneleaf 渲染，而是以原型访问时，浏览器会直接显然被注释的内容。

<body>
    
    <p>中国</p>
    
    
     
    
    
    
    <div> you can see me only before Thymeleaf processes me!</div>
    <div> you can see me only before Thymeleaf processes me!</div>
    
    </body>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1][]

## Thymeleaf 专有注释 ##

Thymeleaf 专有注释格式如下：

>

可以看出是在 Html 注释的基础上加上了 /\*/，它的作用是当模板被静态打开（即作为原型）时，这些被注释的内容将会被注释掉，而通过 Thymeleaf 渲染时， 会被自动删除，其中的内容都将进行正常显示。这与上面 解析器级注释方式2 刚好相反，解析器级注释方式2 是作为原型打开时可以显示，而 Thymeleaf 渲染时会被删除。

<body>
    
    
    
    
    </body>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220412/82515cca9cd2429199e3d0f6f6e13399.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 1]: /images/20220412/804a9a059aeb4757832a64b36e2c39b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 2]: /images/20220412/f5f02cebdd6d423b945c6c111ca7bbf5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70 3]: /images/20220412/9f1c62d1a1324fe4bc10535194978818.png