Data Binding

The dynamic data in AXML is bound with the data content in Page.

Simple Binding

The Mustache syntax is used to package variable with two pairs of braces ({{}}). It can be used in various syntax scenarios.

Contents

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

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

Component Attribute

Component attributes need to be packaged with double quotation marks ("").

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

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

Control Attribute

Control attributes need to be packaged with double quotation marks ("").

<view a:if="{{condition}}"> </view>

Page({
  data: {
    condition: true,
  },
});

Keywords

The keywords need to be packaged with double quotation marks ("").

• True: boolean true

• False:  boolean false

<checkbox checked="{{false}}"> </checkbox>

Note: Do not code directly checked="false". The operation result is a string, and becomes the true value when converted into boolean type.

Operation

Simple operation can be packaged with two pairs of braces ({{}}). The following operations 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,
  },
});

Page output content is 3 + 3 + d

Logic Judgment

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

String Operation

<view>{{"hello" + name}}</view>

Page({
  data:{
    name: 'Mini Program',
  },
});

Data Path Operation

<view>{{object.key}} {{array[0]}}</view>

Page({
  data: {
    object: {
     key: 'Hello ',
},
    array: ['Mini Program'],
  },
});

Combine

The combination can be done directly in the Mustache syntax to make up a new object or array.

Array

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

Finally combined into array [0, 1, 2, 3, 4]

Object

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

Finally combined into object {foo: 1, bar: 2}.

Destructuring operator ... can be used to expand an object:

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>

Page({
  data: {
    obj1: {
      a: 1,
      b: 2,
    },
    obj2: {
      c: 3,
      d: 4,
    },
  },
});

Finally combined into object {a: 1, b: 2, c: 3, d: 4, e: 5}.

If the object key and value are the same, the indirect expression is as below:

<template is="objectCombine" data="{{foo, bar}}"></template>
Page({
  data: {
    foo: 'my-foo',
    bar: 'my-bar',
  },
});

Finally combined into object {foo: 'my-foo', bar:'my-bar'}

Note: The above methods can be combined randomly. When the variable names are the same, however, the latter overrides the former. For example:

Page({
    data: {
        obj1: {
      a: 1,
      b: 2,
    },
    obj2: {
      b: 3,
      c: 4,
    },
  a: 5,
  },
});

Finally combined into object {a: 5, b: 3, c: 6}.

FAQ

Q: How to clear the data when jumping to a new page?

A: The data can not be cleared, you can override the data when jumping.