Skip to content

Latest commit

 

History

History
145 lines (124 loc) · 7.16 KB

6.Thymeleaf.md

File metadata and controls

145 lines (124 loc) · 7.16 KB
Raw

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

局部变量

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

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

  • 1）如上所示 th:each 迭代中的 user 其实就是局部变量，仅在 标签范围内可用，包括所有子元素，可用于在该标签中执行优先级低于 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 中，以便它可以与上下文中声明的任何其他变量一起使用，但只能在包含的 

标签内使用。

  • 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>

编码示例

<!--定义变量 userName='Admin'，可在整个 body 中进行使用-->
<body th:with="userName='Admin'">
<p>当前登录用户：<span th:text="${userName}"></span></p>
 
<!--后台传值：model.addAttribute("userList", userList)，userList 中有5个User-->
<div th:with="userFirst=${userList[0]}">
    <p>我：<span th:text="${userFirst}"></span></p>
</div>
 
<!--一次定义三个变量：withId、withInfo、isMarry-->
<!--后台传值：model.addAttribute("id", null)，于是 withId 的值也为nuLl-->
<!--后台传值：model.addAttribute("info", "Love you 中国");-->
<!--后台传值：model.addAttribute("isMarry", true);-->
<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>
 
<!--一次定义两个变量 id 与 flag ，且 flag 的值使用到了 id 变量-->
<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>

属性优先级

     当在同一个标签中写多个 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 属性都定义一个数字优先级，以便确定在标签中按顺序执行。优先级清单如下：

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
     这个优先机制意味着与属性位置并无关系，只与属性名有关： ```
       
  • Item description here...

等价于

       
  • Item description here...
```

Thymeleaf 注释

ThymeLeaf 解析器级注释

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

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

格式如下：

格式1：

<!--/* <div> you can see me only before Thymeleaf processes me!</div> */--> 

格式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 渲染，而是以原型访问时，浏览器会直接显然被注释的内容。

Thymeleaf 专有注释

     Thymeleaf 专有注释格式如下：

<!--/*/
....
/*/-->

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