thymeleaf 如何判断为空_Thymeleaf参考手册（十三）：文字模板模式

文字语法

在Thymeleaf的三种模板模式被认为是文字：TEXT，JAVASCRIPT和CSS。这将它们与标记模板模式区分开：HTML和 XML。

文本模板模式和标记模式之间的主要区别在于，在文本模板中，没有标签可以插入属性形式的逻辑，因此我们必须依靠其他机制。

这些机制的第一个也是最基本的是内联的，我们已经在上一章中进行了详细介绍。内联语法是在文本模板模式下输出表达式结果的最简单方法，因此，这是文本电子邮件完美有效的模板。

Dear [(${name})],
  Please find attached the results of the report you requested
  with name "[(${report.name})]".
  Sincerely,
    The Reporter.

即使没有标签，上面的示例也是一个完整且有效的Thymeleaf模板，可以在 TEXT 模板模式下执行。

但是，为了包含比单纯的输出表达式更复杂的逻辑，我们需要一种新的非基于标记的语法：

[# th:each="item : ${items}"]
  - [(${item})]
[/]

实际上是更冗长的精简版本：

[#th:block th:each="item : ${items}"]
  - [#th:block th:utext="${item}" /]
[/th:block]

请注意，这种新语法是如何基于声明为的元素（即可处理标签）[#element ...] 而不是 <element ...>。元素以 [#element ...] 开头，以 [/element] 闭合，并且可以通过 / 将开始元素最小化来声明独立标签，该方式几乎等同于XML标签：[#element ... /]。

标准方言仅包含用于以下元素之一的处理器：th:block，尽管我们可以在方言中对此进行扩展并以通常的方式创建新元素。另外，th:block 元素（[#th:block ...] ... [/th:block]）可以缩写为空字符串（[# ...] ... [/]），因此上述代码块实际上等效于：

[# th:each="item : ${items}"]
  - [# th:utext="${item}" /]
[/]

给定 [# th:utext="${item}" /] 等效于内联的未转义表达式，我们可以使用它来减少代码量。因此，我们结束了上面看到的代码的第一个片段：

[# th:each="item : ${items}"]
  - [(${item})]
[/]

请注意，文本语法要求元素对称（没有未关闭的标签）和带引号的属性 – XML样式比HTML样式更多。

我们来看一个更完整的TEXT模板示例，即纯文本电子邮件模板：

Dear [(${customer.name})],
This is the list of our products:
[# th:each="prod : ${products}"]
   - [(${prod.name})]. Price: [(${prod.price})] EUR/kg
[/]
Thanks,
  The Thymeleaf Shop

执行后，其结果可能类似于：

Dear Mary Ann Blueberry,
This is the list of our products:
   - Apricots. Price: 1.12 EUR/kg
   - Bananas. Price: 1.78 EUR/kg
   - Apples. Price: 0.85 EUR/kg
   - Watermelon. Price: 1.91 EUR/kg
Thanks,
  The Thymeleaf Shop

JAVASCRIPT 模板模式下的另一个示例（greeter.js文件）将作为文本模板进行处理，然后从HTML页面调用该结果。请注意，这不是HTML模板中的 <script> 块，而是 .js 单独作为模板处理的文件：

var greeter = function() {
    var username = [[${session.user.name}]];
    [# th:each="salut : ${salutations}"]    
      alert([[${salut}]] + " " + username);
    [/]
};

执行后，其结果可能类似于：

var greeter = function() {
    var username = "Bertrand "Crunchy" Pear";
      alert("Hello" + " " + username);
      alert("Olu00E1" + " " + username);
      alert("Hola" + " " + username);
};

转义元素属性

为了避免与模板的其他部分可能会以其他方式处理的交互（例如，HTML模板内的文本模式），Thymeleaf 3.0允许转义其文本语法中元素的属性。所以：

• TEXT 模板模式下的属性将采用HTML转义。
• JAVASCRIPT 模板模式下的属性将是JavaScript非转义的。
• CSS 模板模式下的属性将采用CSS换码。

因此，这在文本模式模板中是完全可以的（请注意 &gt;）：

[# th:if="${120<user.age}"]
     Congratulations!
 [/]

当然，&lt; 在实际的文本模板中这没有任何意义，但是如果我们用包含上面代码的th:inline="text" 代码块来处理HTML模板，并且希望确保我们的浏览器在静态打开文件作为原型时，不使用 <user.age 作为起始标记的名称。

可扩展性

这种语法的优点之一是它与标记语法一样可扩展。开发人员仍然可以使用自定义元素和属性来定义自己的方言，为它们应用前缀（可选），然后在文本模板模式下使用它们：

[#myorg:dosomething myorg:importantattr="211"]some text[/myorg:dosomething]

纯文本原型注释块：添加代码

在JAVASCRIPT 和 CSS 模板模式（不适用于 TEXT），允许包括一个特殊的注释语法之间的代码 /*[+...+]*/，这样Thymeleaf会处理模板时自动取消注释这样的代码：

var x = 23;
/*[+
var msg  = "This is a working application";
+]*/
var f = function() {
    ...

将解析为：

var x = 23;
var msg  = "This is a working application";
var f = function() {
...

也可以在这些注释中包含表达式，它们将被评估：

var x = 23;
/*[+
var msg  = "Hello, " + [[${session.user.name}]];
+]*/
var f = function() {
...

文本解析器级注释块：删除代码

在类似于仅原型的注释块的方式，所有三个文本模板模式（TEXT，JAVASCRIPT 和 CSS）使其能够指示Thymeleaf特殊之间移除代码/*[- */ 和 /* -]*/ 标志，就像这样：

var x = 23;
/*[- */
var msg  = "This is shown only when executed statically!";
/* -]*/
var f = function() {
...

或在 TEXT 模式下：

...
/*[- Note the user is obtained from the session, which must exist -]*/
Welcome [(${session.user.name})]!
...

自然的JavaScript和CSS模板

如之前所述，JavaScript和CSS内联提供了将内联表达式包含在JavaScript / CSS注释中的可能性，例如：

...
var username = /*[[${session.user.name}]]*/ "Sebastian Lychee";
...

解析后结果为：

...
var username = "John Apricot";
...

实际上，可以将这种将内联表达式包含在注释中的相同技巧可用于整个文本模式语法：

/*[# th:if="${user.admin}"]*/
    alert('Welcome admin');
/*[/]*/

如果模板是静态打开的（因为它是100％有效的JavaScript），并且如果用户是管理员运行模板，则将在上面的代码中显示该警报。它等效于：

[# th:if="${user.admin}"]
   alert('Welcome admin');
[/]

实际上是模板解析期间初始版本转换成的代码。

但是请注意，注释行中的换行元素不会像内联表达式那样，清除其所在的行（直到一直在右边找到a ;为止）。这种行为只适用于内联输出表达式。

因此Thymeleaf 3.0允许以自然模板的形式开发复杂的JavaScript脚本和CSS样式表，这些模板既可以作为原型也可以作为工作模板使用。

我是银河架构师，十年饮冰，难凉热血，愿历尽千帆，归来仍是少年！

如果文章对您有帮助，请举起您的小手，轻轻【三连】，这将是笔者持续创作的动力源泉。当然，如果文章有错误，或者您有任何的意见或建议，请留言。感谢您的阅读！

---

文章不定时更新，可微信搜索「银河架构师」，精彩内容，先睹为快！