Thymeleaf 3.0教程：13 文本模板模式(一)

13.1 文本语法

  Thymeleaf模板模式中有三种:文本、JAVASCRIPT和CSS。这使它们不同于标记模板模式:HTML和XML。

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

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

  Dear [(${name})],

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

  Sincerely,
    The Reporter.

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

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

[# 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}" /]相当于一个内联的非转义表达式，我们可以使用它来减少代码。因此，我们最后得到了上面看到的第一段代码:

  - [(${item})]
[/]

  请注意，文本语法需要完全的元素平衡(没有未关闭的标签)和引用的属性——它更像是XML样式而不是HTML样式。

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

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模板中的文本模式内联)，Thymeleaf3.0允许在其文本语法中的元素属性被转义。那么:

  文本模板模式下的属性将是不可转义的。

  JAVASCRIPT模板模式下的属性将是JAVAScript-未转义的。

  CSS模板模式下的属性将不会被转义。

  所以这在文本模式模板中是完全可以的(请注意&gt;):

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

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