Data binding

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.

Content

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello alipay!',
  },
});

Component attributes

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

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0,
  },
});

Control attributes

Control 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>

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}.