All Products
Search

This Product

    Mobile Platform as a Service:data binding

    Document Center

    Mobile Platform as a Service:data binding

    Last Updated:Feb 03, 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}.