在模板 HTML 中，我们通过一定的数据绑定语法编写，相应的数据就能在视图上呈现。

场景

插值

和许多模板引擎一样，插值的语法形式是表达式位于双大括号中，表达式后可以接任意多个过滤器。

  1. {{ expr [[| filter-call1] | filter-call2...] }}

在文本内容区域我们可以使用插值替换。

  1. <p>Hello {{name}}!</p>

在 HTML 标签的 属性(attribute) 内，我们也可以使用插值替换。

  1. <span title="This is {{name}}">{{name}}</span>

使用过滤器可以对插值数据进行处理。

  1. <p>Hello {{name | upper}}!</p>

表达式：在插值替换的双大括号中，San 提供了丰富的表达式支持，具体请参考本篇后续的表达式章节。

过滤器：过滤器相关描述请参考本篇后续的过滤器章节。

提示：插值将默认进行 HTML 转义。如果不需要 HTML 转义请参考本篇后续的输出HTML章节。

属性绑定

顾名思义，属性绑定的意思是，将数据绑定到子组件的 属性(property) 上。属性绑定的形式和插值绑定相同，通过 HTML 标签的 属性(attribute)声明，通常情况只声明一个 {{ expression }}。

下面的例子中，当 jokeName 数据变化时，会自动将新的值设置到 label 组件的 text 属性中。

  1. <ui-label text="{{jokeName}}"></ui-label>

表达式：属性绑定支持任意类型的表达式，具体请参考本篇后续的表达式章节。

属性整体绑定

版本：>= 3.5.8

通过 s-bind ，可以为组件绑定整个数据。当s-bind 和单个的属性绑定并存时，单个的属性绑定将覆盖整体绑定中相应的数据项。

  1. <ui-label s-bind="{{ {text: email, title: name} }}"></ui-label>
  3. <!-- text 单个属性声明将覆盖 s-bind 中的 text 项 -->
  4. <ui-label s-bind="{{ {text: email, title: name} }}" text="{{name}}"></ui-label>

提示：对象字面量常用于属性整体绑定。

双向绑定

通过 HTML 标签的 属性(attribute)声明 {= expression =} 的形式，可以声明双向绑定。

双向绑定通常出现在 用户输入 的场景，将用户输入结果自动更新到组件数据。所以我们通常在 输入表单元素 或 具有输入反馈的自定义组件 上应用双向绑定。

下面的例子将 input、select、自定义组件的 value 属性与声明的数据项（name、online、color）建立了双向绑定关系。当用户输入时，相应数据项的值会发生变化。

  1. <input type="text" value="{= name =}">
  3. <select value="{= online =}">
  4.     <option value="errorrik">errorrik</option>
  5.     <option value="otakustay">otakustay</option>
  6.     <option value="firede">firede</option>
  7. </select>
  9. <ui-colorpicker value="{= color =}"></ui-colorpicker>

表达式：双向绑定仅支持普通变量和属性访问表达式，否则可能导致不可预测的问题。

输出HTML

有时候我们希望输出原封不动的 HTML，不希望经过 HTML 转义。在 San 里有两种方式可以做到。

  1. 指令 s-html
  2. 过滤器 raw。过滤器 raw 是一个虚拟过滤器
  1. <p s-html="rawHTML"></p>
  2. <p>{{rawHTML | raw}}</p>

表达式

San 提供了丰富的表达式类型支持，让使用者在编写视图模板时更方便。

  • 数据访问(普通变量、属性访问)
  • 一元否定
  • 二元运算
  • 二元关系
  • 三元条件
  • 括号
  • 字符串
  • 数值
  • 布尔
  • 数组字面量 >= 3.5.9
  • 对象字面量 >= 3.5.9

下面通过插值替换的例子列举支持的表达式类型。

  1. <!-- 普通变量 -->
  2. <p>{{name}}</p>
  4. <!-- 属性访问 -->
  5. <p>{{person.name}}</p>
  6. <p>{{persons[1]}}</p>
  8. <!-- 一元否定 -->
  9. <p>{{!isOK}}</p>
  10. <p>{{!!isOK}}</p>
  12. <!-- 二元运算 -->
  13. <p>{{num1 + num2}}</p>
  14. <p>{{num1 - num2}}</p>
  15. <p>{{num1 * num2}}</p>
  16. <p>{{num1 / num2}}</p>
  17. <p>{{num1 + num2 * num3}}</p>
  19. <!-- 二元关系 -->
  20. <p>{{num1 > num2}}</p>
  21. <p>{{num1 !== num2}}</p>
  23. <!-- 三元条件 -->
  24. <p>{{num1 > num2 ? num1 : num2}}</p>
  26. <!-- 括号 -->
  27. <p>{{a * (b + c)}}</p>
  29. <!-- 数值 -->
  30. <p>{{num1 + 200}}</p>
  32. <!-- 字符串 + 三元条件 -->
  33. <p>{{item ? ',' + item : ''}}</p>
  35. <!-- 数组字面量 -->
  36. <x-list data="{{ persons || [] }}" />
  38. <!-- 对象字面量 -->
  39. <x-article data="{{ {title: articleTitle, author: user} }}" />

注意：双向绑定仅支持普通变量和属性访问表达式。

过滤器

在插值替换时，过滤器可以实现对插值数据的处理和变换，使其转换成更适合视图呈现的数据形式。注意：过滤器仅在插值替换时支持。

插值替换支持多过滤器处理。过滤器之间以类似管道的方式，前一个过滤器的输出做为后一个过滤器的输入，向后传递。

  1. <!-- 普通变量 -->
  2. <p>{{myVariable | html | url}}</p>

filter支持参数传递，参数可以是任何支持的表达式。

  1. <!-- // 假设存在过滤器: comma -->
  2. <p>{{myVariable | comma(3)}}</p>
  3. <p>{{myVariable | comma(commaLength)}}</p>
  4. <p>{{myVariable | comma(commaLength + 1)}}</p>

过滤器在组件声明时注册，具体请参考组件文档。

字符实体

在我们编写 HTML 时，如果内容中包含 HTML 预留字符或特殊字符，我们需要写字符实体。San 的模板 HTML 是自解析的，由于体积的关系，只支持有限的具名字符实体：

  • &lt;
  • &gt;
  • &nbsp;
  • &quot;
  • &emsp;
  • &ensp;
  • &thinsp;
  • &copy;
  • &reg;
  • &zwnj;
  • &zwj;
  • &amp;
  1. <p>LiLei &amp; HanMeiMei are a couple.</p>
  2. <p>1 + 1 &lt; 3</p>

除此之外，我们可以使用 &#[entity_number]; 或 &#x[entity_number]; 形式的编号字符实体。

  1. <p>LiLei &#38; HanMeiMei are a couple.</p>
  2. <p>1 + 1 &#60; 3</p>