13.1 文本语法

13.1 文本语法

有三种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})]
[/]

注意：文本语法要求完全的元素平衡（没有未关闭的标签）并且属性用引号包围————比起HTML风格，它更像是XML风格。

让我们看一个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);
};