# 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`文件：

```javascript
var greeter = function() {

    var username = [[${session.user.name}]];

    [# th:each="salut : ${salutations}"]    
      alert([[${salut}]] + " " + username);
    [/]

};
```

执行后，结果类似于：

```javascript
var greeter = function() {

    var username = "Bertrand \"Crunchy\" Pear";

      alert("Hello" + " " + username);
      alert("Ol\u00E1" + " " + username);
      alert("Hola" + " " + username);

};
```