十三、文本模板模式

13.1 Literals 语法

Thymeleaf 的三个“模板模式”被认为是“文本的”：TEXT，JAVASCRIPT和CSS。这将它们与标记模板模式HTML和XML区别开来。

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

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

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]一样关闭，并且可以通过使用/最小化 open 元素来声明独立标签，其方式几乎等同于 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("Ol\u00E1" + " " + username);
      alert("Hola" + " " + username);

};

转义的元素属性

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

• TEXT模板模式下的属性将为* HTML-unscaped *。
• JAVASCRIPT模板模式下的属性为* JavaScript-unscaped *。
• CSS模板模式下的属性为* CSS-unscaped *。

因此，这在TEXT-模式模板(请注意>)中完全可以：

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

当然，在一个“真实文本”模板中<是没有意义的，但是如果我们正在处理一个包含上面代码的th:inline="text"块的 HTML 模板，并且要确保我们的浏览器不会采用该模板，则是个好主意。静态打开文件作为原型时，打开标记的名称为<user.age。

13.2 Extensibility

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

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

13.3 纯文本原型 Comments 块：添加代码

JAVASCRIPT和CSS模板模式(不适用于TEXT)允许在特殊 Comments 语法/[+...+]/之间包含代码，以便 Thymeleaf 在处理模板时会自动取消 Comments 此类代码：

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() {
...

您可以在这些 Comments 中包含表达式，它们将被评估：

var x = 23;

/*[+

var msg  = "Hello, " + [[${session.user.name}]];

+]*/

var f = function() {
...

13.4 文本解析器级别的 Comments 块：删除代码

以类似于仅原型 Comments 块的方式，所有三种文本模板模式(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})]!
...

13.5 自然 JavaScript 和 CSS 模板

如上一章所示，JavaScript 和 CSS 内联提供了将内联表达式包含在 JavaScript/CSSComments 中的可能性，例如：

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

…这是有效的 JavaScript，执行后的外观如下：

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

实际上，可以在 Comments 中使用相同的“技巧”将内联表达式括起来，以用于整个文本模式语法：

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

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

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

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

但是请注意，在 Comments 中包装元素并不会像内联输出表达式那样清除它们所在的行(在找到;之前向右移动)。该行为仅保留给内联输出表达式。

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