All Products
Search
Document Center

data binding

Last Updated: Feb 04, 2021

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

  1. <view> {{ message }} </view>
  1. Page({
  2. data: {
  3. message: 'Hello alipay!',
  4. },
  5. });

Component attribute

Component attributes must be enclosed in double quotation marks ("").

  1. <view id="item-{{id}}"> </view>
  1. Page({
  2. data: {
  3. id: 0,
  4. },
  5. });

Controlled attribute

Controlled attributes must be enclosed in double quotation marks ("").

  1. <view a:if="{{condition}}"> </view>
  1. Page({
  2. data: {
  3. condition: true,
  4. },
  5. });

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.
  1. <checkbox checked="{{false}}"> </checkbox>
Note: Do not directly write 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

  1. <view hidden="{{flag ? true : false}}"> Hidden </view>

Arithmetic operation

  1. <view> {{a + b}} + {{c}} + d </view>
  1. Page({
  2. data: {
  3. a: 1,
  4. b: 2,
  5. c: 3,
  6. },
  7. });

The page output is 3 + 3 + d.

Logical judgment

  1. <view a:if="{{length > 5}}"> </view>

String operation

  1. <view>{{"hello" + name}}</view>
  1. Page({
  2. data:{
  3. name: 'alipay',
  4. },
  5. });

Data path operation

  1. <view>{{object.key}} {{array[0]}}</view>
  1. Page({
  2. data: {
  3. object: {
  4. key: 'Hello ',
  5. },
  6. array: ['alipay'],
  7. },
  8. });

Combination

You can directly implement combinations in Mustache syntax to build new objects or arrays.

Array

  1. <view a:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>
  1. Page({
  2. data: {
  3. zero: 0,
  4. },
  5. });

The end result is the array [0, 1, 2, 3, 4].

Object

  1. <template is="objectCombine" data="{{foo: a, bar: b}}"></template>
  1. Page({
  2. data: {
  3. a: 1,
  4. b: 2,
  5. },
  6. });

The end result is the object {foo: 1, bar: 2.

You can also use destructuring operator ... to extend an object:

  1. <template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>
  1. Page({
  2. data: {
  3. obj1: {
  4. a: 1,
  5. b: 2,
  6. },
  7. obj2: {
  8. c: 3,
  9. d: 4,
  10. },
  11. },
  12. });

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.

  1. <template is="objectCombine" data="{{foo, bar}}"></template>
  1. Page({
  2. data: {
  3. foo: 'my-foo',
  4. bar: 'my-bar',
  5. },
  6. });

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:

  1. <template is="objectCombine" data="{{...obj1, ...obj2, a, c: 6}}"></template>
  1. Page({
  2. data: {
  3. obj1: {
  4. a: 1,
  5. b: 2,
  6. },
  7. obj2: {
  8. b: 3,
  9. c: 4,
  10. },
  11. a: 5,
  12. },
  13. });

The end result is the object {a: 5, b: 3, c: 6}.