File reference

The axml provides two file reference methods: import and include

import

The import can load a defined template.

For example, a template named item was defined in the item.axml.

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

When item.axml is referenced in index.axml, the item template can be used.

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

The import has the concept of action scope. Only the template defined in the target file is imported, but the one imported into the target file is not imported.

For example, C import B, B import A, in C it is possible to use the template defined in B, in B it is possible to use the template defined in A, but in C it is impossible to use the template defined in A.

<!-- 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"/>  <!-- Note: cannot use import A -->
<template is="B"/>

Note that the sub-node of template can be one only. For example:

Allowed example:

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

Disallowed example:

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

include

The include may introduce the whole codes except for <template/>, which is equivalent to copy to the include position.

Code sample:

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

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

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

Introduction Path

The template introduction path supports relative path, absolute path and third-party module loaded from node_modules directory.

<import src="./a.axml"/> <!-- relative path -->
<import src="/a.axml"/> <!-- absolute path of the project -->
<import src="third-party/x.axml"/> <!-- path of the third-party npm package -->