Introduction

The suffix of the presentation file is “axml”, which defines the label structure of the page. Here are some examples to demonstrate the capabilities of “axml”.

Data binding：

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

// page.js
Page({
    data: {
        message: 'Hello alipay!'
    }
})

List rendering：

<view a:for="{{items}}"> {{item}} </view>

// page.js
Page({
    data: {
        items: [1, 2, 3, 4, 5, 6, 7]
    }
})

Conditional rendering：

<view a:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view a:elif="{{view == 'APP'}}"> APP </view>
<view a:else="{{view == 'alipay'}}"> alipay </view>

// page.js
Page({
    data: {
        view: 'alipay'
    }
})

Template：

<template name="staffName"> 
   <view>
     FirstName: {{firstName}}, LastName: {{lastName}} 
   </view> 
  </template> 
  <template is="staffName" data="{{...staffA}}"></template> 
  <template is="staffName" data="{{...staffB}}"></template> 
  <template is="staffName" data="{{...staffC}}"></template>

// page.js
// Hats off to the Wechat Mini Program engineers.
Page({
    data: {
        staffA: {
            firstName: 'san',
            lastName: 'zhang'
        },
        staffB: {
            firstName: 'si',
            lastName: 'li'
        },
        staffC: {
            firstName: 'wu',
            lastName: 'wang'
        },
    },
})

Event：

<view onTap="add"> {{count}} </view>

Page({
    data: {
        count: 1
    },
    add(e) {
        this.setData({
            count: this.data.count + 1
        })
    }
})

Data binding

The dynamic data in “axml” come from the “data”in“Page”.

Simple binding

“Mustache syntax” (double brackets) inis used data bindingto wrap up variables, which can be applied in various situations including content. For example:

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

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

It is applied in component attribute (which needs to be enclosed in double quotes), for example:

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

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

Acts on control attributes (need to be within double quotes), e.g:

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

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

It is applied in keywords(which need to be enclosed in double quotes), for example:

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

• true：“ true” of boolean type, represents the truth value.
• false：“false” of boolean type, represents a false value.

  Note: Don’t write “checked=”false” directly. The calculationresult is a string, which will represent “true” when converted to a Boolean value type.

Simple calculations can be performed in {{}}, and here are following methods:

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 contents of the View are 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']
    }
})

It can also be combined directly in “Mustache” to form a new array or an object.

Array:

<view a:for="{{[zero, 1, 2, 3, 4]}}"> {{item}} </view>

Page({
    data: {
        zero: 0
    }
})

The final combined array is [0, 1, 2, 3, 4].

Object：

<template is="objectCombine" data="{{foo: a, bar: b}}"></template>

Page({
    data: {
        a: 1,
        b: 2
    }
})

The final combined object is {foo: 1, bar: 2}.

You can also use the spread operator… 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
        }
    }
})

The final combined object is {a: 1, b: 2, c: 3, d: 4, e: 5}.

If the “key” and “value” of the object are the same, they can also be expressed indirectly.

<template is="objectCombine" data="{{foo, bar}}"></template>

Page({
    data: {
        foo: 'my-foo',
        bar: 'my-bar'
    }
})

The final combined object is {foo: ‘my-foo’, bar:’ my-bar’ }.

Note: The above methods can be combined randomly, but if there are cases where the variable names are the same, the following variables will override the previous variables.

<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 final combined object is {a: 5, b: 3, c: 6}.

Conditional rendering

a:if

In the framework, you can use a:if=”{{condition}}” to decide on whether the code block needs to be rendered.

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

You can also use “a:elif” and “a:else” to add an “else” block.

<view a:if="{{length > 5}}"> 1 </view>
<view a:elif="{{length > 2}}"> 2 </view>
<view a:else> 3 </view>

block a:if

Due tothe control attribute of “a:if”, it needs to be added to a label. If you want to judge multiple component tags at once, you can use a tag to wrap multiple components, and use a:if on it to control the attributes.

<block a:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>

Note: is not a component, but just a packaging element,which will not do any rendering in the page and only accept control attributes.

List rendering

a:for

You can bind an array with the “a:for” attribute on the component before rendering the component repeatedly with the data in the array. The subscript variable name of the current item in the array is“index” by default, and the variable name of the current item in the array is “item” by default.

<view a:for="{{array}}">
{{index}}: {{item.message}}
</view>

Page({
    data: {
        array: [{
            message: 'foo',
        },
        {
            message: 'bar'
        }]
    }
})

Use “a:for-item” to specify the variable name of the current element of the array.

Use “a:for-index” to specify the variable name of thecurrent subscript of the array.

<view a:for="{{array}}" a:for-index="idx" a:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>

“a:for” can also be nested. And the following is a code example of the multiplication table:

<view a:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" a:for-item="i">
<view a:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" a:for-item="j">
<view a:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>

block a:for

Similar to “block a:if”, you can also use “a:for” on the tag to render a structure block containing multiple nodes.

<block a:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>

a:key

If the position of an item in the list changes dynamically or a new item is added to the list with the items maintaining their own characteristics and state (like the input content in , ), you need to use “a:key” to specify the unique identifier of the item in the list.

The value of “a:key is provided in two forms:

• A string represents a certain attribute of “item” in the “array” of the “for”cycle. The value of this attribute needs to be the only string or number in the list and cannot be changed dynamically.
• The reserved keyword “*this” represents the “item” itself in the “for”cycle, indicating that the “item” itself is required to be a unique string or number. For example, when the data change triggers the rendering layer to re-execute the rendering, the components with the “key” will be corrected. And the framework will ensure that they are reordered rather than re-created so as to make the components remain their own stateand improve the efficiency of list rendering.

If you know that the list is static or don’t notice its order, you can ignore it.

Code example:

<view class="container">
<view a:for="{{list}}" a:key="*this">
<view onTap="bringToFront" data-value="{{item}}">
{{item}}: click to bring to front
</view>
</view>
</view>

Page({
    data: {
        list: ['1', '2', '3', '4'],
    },
    bringToFront(e) {
        const {
            value
        } = e.target.dataset;
        const list = this.data.list.concat();
        const index = list.indexOf(value);
        if (index !== -1) {
            list.splice(index, 1);
            list.unshift(value);
            this.setData({
                list
            });
        }
    }
});

key

“key” is a more universal way of writing than “a:key”, which can be filled with any expression and string.

Code example：

<view class="container">
<view a:for="{{list}}" key="{{item}}">
<view onTap="bringToFront" data-value="{{item}}">
{{item}}: click to bring to front
</view>
</view>
</view>

Page({
    data: {
        list: ['1', '2', '3', '4'],
    },
    bringToFront(e) {
        const {
            value
        } = e.target.dataset;
        const list = this.data.list.concat();
        const index = list.indexOf(value);
        if (index !== -1) {
            list.splice(index, 1);
            list.unshift(value);
            this.setData({
                list
            });
        }
    }
});

Meanwhile, the “key” can be used to prevent the reuse of components. For example, if users are allowed to input different types of data:

<input a:if="{{name}}" placeholder="Enter your username">
<input a:else placeholder="Enter your email address">

Then when you input “name” and switch to “email”, the current input value will be retained. If you don’t want to retain it, you can add “key”:

<input key="name" a:if="{{name}}" placeholder="Enter your username">
<input key="email" a:else placeholder="Enter your email address">

Reference

“axml” provides two file reference methods: “import” and “include”.

import

“import” can load the “template” that has been defined.

For example, a “template”named “item” is defined in “item.axml”.

<!-- item.axml -->
<template name="item">
<text>{{text}}</text>
</template>

You can use the“item” template after the reference of“item.axml” in “index.axml”.

<import src="./item.axml"/>
<template is="item" data="{{text: 'forbar'}}"/>

Only the “template” defined in the target file will be imported due to the scope concept of “import”. For example, C import B. B import A.The “template” defined by B can be used in C, and the “template” defined by A can be used in B, but the “template” defined in A cannot be used in C.

<!-- A.axml -->
<template name="A">
<text> A template </text>
</template>

<!-- B.axml -->
<import src="./a.axml"/>
<template name="B">
<text> B template </text>
</template>

<!-- C.axml -->
<import src="./b.axml"/>
<template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>

Note:The sub-node of “template” can only be one rather than multiple ones.For example:
Allowing

<template name="x">
<view />
</template>

Not allowing

<template name="x">
<view />
<view />
</template>

include

“include” can import the entire code of the target file except , which is an equivalent of copy in the “include”. The code example is as follows:

<!-- index.axml -->
<include src="./header.axml"/>
<view> body </view>
<include src="./footer.axml"/>

<!-- header.axml -->
<view> header </view>

<!-- footer.axml -->
<view> footer </view>

Template

“axml” provides template, in which you can define code snippets and call them in different places.

Define the template

Use the “name” attribute as the name of the template, and then define the code snippets within .

<!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>

Use templates

Use the “is” attribute to declare the template to be used, and then import the data required by the template.For example:

<template is="msgItem" data="{{...item}}"/>

Page({
    data: {
        item: {
            index: 0,
            msg: 'this is a template',
            time: '2016-09-15'
        }
    }
})

“Mustache syntax” can be used by “is” attribute to dynamically decide on which template needs to be rendered.

<template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template>
<block a:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>

Note: With its own scope, the template can only use the data passed by “data”.But it can bind the logical processing function of the page through onXX.

It is recommended to use the “template” method to import the template snippets because the template will specify its own scope and only use the data passed in by “data”. And mini programs will optimize this accordingly. If the “data” of the “template” does not change, the snippet UI will not be re-rendered. The reference path supports loading the third module from the “node_modules” directory such as “page.axml”:

<import src="./a.axml"/> <!-- 相对路径 -->
<import src="/a.axml"/> <!-- 项目绝对路径 -->
<import src="third-party/x.axml"/> <!-- 第三方 npm 包路径 -->