The dynamic data in AXML is bound to the data
content on the corresponding Page
.
Simple binding
Data binding wraps variables with two pairs of braces ({{}}
) based on Mustache and can be applied in various syntax scenarios.
The content of the bubble window
<view> {{ message }} </view>
Page({
data: {
message: 'Hello alipay!',
},
});
Component attribute
Component attributes must be enclosed in double quotation marks (""
).
<view id="item-{{id}}"> </view>
Page({
data: {
id: 0,
},
});
Controlled attribute
Controlled attributes must be enclosed in double quotation marks (""
).
<view a:if="{{condition}}"> </view>
Page({
data: {
condition: true,
},
});
Keywords
Keywords need to be enclosed in double quotation marks (""
).
- true: boolean-type true, represents a true value.
- false: boolean-type false, represents a false value.
<checkbox checked="{{false}}"> </checkbox>
checked="false"
, the computing result is a string, and represents a true value when converted to a boolean type.Operation
Wrap easy operations with two pairs of braces ({{}}
).The following operation methods are supported.
Ternary operation
<view hidden="{{flag ? true : false}}"> Hidden </view>
Arithmetic operation
<view> {{a + b}} + {{c}} + d </view>
Page({
data: {
a: 1,
b: 2,
c: 3,
},
});
The page output is 3 + 3 + d
.
Logical judgment
<view a:if="{{length > 5}}"> </view>
String operation
<view>{{"hello" + name}}</view>
Page({
data:{
name: 'alipay',
},
});
Data path operation
<view>{{object.key}} {{array[0]}}</view>
Page({
data: {
object: {
key: 'Hello ',
},
array: ['alipay'],
},
});
Combination
You can directly implement combinations in Mustache syntax to build new objects or arrays.
Array
<view a:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
Page({
data: {
zero: 0,
},
});
The end result is the array [0, 1, 2, 3, 4]
.
Object
<template is="objectCombine" data="{{foo: a, bar: b}}"></template>
Page({
data: {
a: 1,
b: 2,
},
});
The end result is the object {foo: 1, bar: 2
.
You can also use destructuring operator ...
to extend an object:
<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
data: {
obj1: {
a: 1,
b: 2,
},
obj2: {
c: 3,
d: 4,
},
},
});
The end result is the object {a: 1, b: 2, c: 3, d: 4, e: 5
.
If the key and value of the object are identical, this can be indirectly expressed.
<template is="objectCombine" data="{{foo, bar}}"></template>
Page({
data: {
foo: 'my-foo',
bar: 'my-bar',
},
});
The end result is the object{foo: 'my-foo', bar:'my-bar'}
.
The preceding methods can be freely combined. However, when variable names are identical, the latter variable will overwrite the former variable, for example:
<template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
Page({
data: {
obj1: {
a: 1,
b: 2,
},
obj2: {
b: 3,
c: 4,
},
a: 5,
},
});
The end result is the object {a: 5, b: 3, c: 6}
.