AIP

模板语法

AIP 提供了一些有用的模板语法和指令，用于高效的操作 DOM，下面会列举一些常用的基本知识，不过更推荐你进入到详细的指令章节阅读全文。

文本插值

文本插值允许你将动态字符串值合并到 HTML 模板中。通过文本插值，你可以动态更改页面中显示的内容，例如显示动态的自定义问候语。

文本插槽

插值指的是将表达式嵌入到被标记的文本中。插值使用双花括号作为界定符，该语法被称为 Mustache 语法：

<div>hello {{ name }}</div>
1

Mustache 语法会被替换为对应作用域 name 属性的值。当 name 对象变更时，对应的插值处的内容也会得到更新。

插值指令（aip-text）

和文本插件能力对齐，通过使用 aip-text 可以设置一个元素的 textContext，该方式是对一整个元素的 textContext 进行绑定，如果想局部绑定，请使用文本插槽。 简单的文本示例：

<div aip-state="{ name: 'developer' }">hello: <span aip-text="name"></span></div>
1

模板表达式

模板表达式可以产生一个值，在双花括号绑定语法中，可以是受限制的 JavaScript 表达式：

<div>hello {{name ? name : 'stranger'}}</div>
<!-- 算数运算-->
<div>sum: {{ 1 + 1 }}</div>
<!-- 函数调用-->
<div>sum: {{peoples.length}} {{name.slice(1)}}</div>
1
2
3
4
5

不支持的语法

需要注意的是，文本插值表达式不支持语句和控制流，例如 if、switch 等。

<!-- 不支持-->
<div>{{ name = 1 }}</div>
<div>{{ if(name) {...} }}</div>
1
2
3

你不能使用那些具有或可能引发副作用的 JavaScript 表达式，包括：

  • 赋值 (=, +=, -=, ...)
  • 运算符，比如 new、typeof 或 instanceof 等
  • 使用 ; 或 , 串联起来的表达式
  • 自增和自减运算符：++ 和 --
  • 一些 ES2015+ 版本的运算符

和 JavaScript 语法的其它显著差异包括：

  • 不支持位运算，比如 | 和 &
  • 新的模板表达式运算符，例如 |，?. 和 !

详情请参考：AIP 表达式

属性绑定

AIP 中的属性绑定可帮助你设置 HTML 元素或指令的属性值。使用属性绑定，你可以执行诸如切换按钮、以编程方式设置路径，以及在组件之间共享值之类的功能。

使用属性绑定语法（aip-bind）

要绑定 HTML 元素的属性，需要使用 aip-bind 指令，然后属性的值可以是任意的变量，模板表达式，例如绑定一个 id 属性：

<div aip-bind:id="id"></div>
1

使用属性绑定快捷语法（[]）

除了使用 aip-bind 来绑定数据外，还可以通过中括号 [] 来快速绑定属性，这本质是 aip-bind 的语法糖：

<div [id]="id"></div>
1

中括号 [] 中间的值会被当中 HTML 元素的属性名，等号右边的会看作动态的表达式进行求值，如果不采用中括号进行绑定，则仅仅会当做正常的静态属性：

<div id="id"></div>
1

这里渲染出来的 id 属性就是静态的字符串 id。

双向绑定

双向绑定为应用中的组件提供了一种共享数据的方式。使用双向绑定绑定来侦听事件并在父组件和子组件之间同步更新值。

使用双向绑定语法

要为 HTML 元素绑定事件并改变数据模型，需要使用 aip-model 指令，然后属性的值需要是一个状态模型的变量名。

<div aip-state="{ name: '' }">
    <aip-input type="text" aip-model:value="name" />
    <span>{{ name }}</span>
</div>
1
2
3
4

使用双向绑定快捷语法

除了使用 aip-model 来双向绑定模型外，还可以通过大括号 + 中括号 [()] 来快速实现双向绑定，这本质是 aip-model 的语法糖：

<div aip-state="{ name: '' }">
    <aip-input type="text" [(value)]="name" />
    <span>{{ name }}</span>
</div>
1
2
3
4

双向绑定原理

双向绑定代表着绑定属性和绑定事件，当事件触发后，可以自动更新绑定的变量的值，双向绑定本质是一个语法糖。

我们可以用一个简单的例子来实现双向绑定：

<div aip-state="{ name: '' }">
    <aip-input type="text" [value]="name" (input)="name = $event.target.value" />
    <span>{{name}}</span>
</div>
1
2
3
4

框架对原生的表单原生做了兼容，aip-model 可以作用于下面的元素：

  • <aip-input>
  • <aip-checkbox>
  • <aip-radio>
  • <aip-picker>
Last Updated: 2022/7/15 下午7:22:06