All Products
Search
Document Center

Reference

Last Updated: Feb 04, 2021

AXML provides two reference methods: import and include.

import

import can load a defined template.

For example: a template named item is defined in item.axml.

  1. <!-- item.axml -->
  2. <template name="item">
  3. <text>{{text}}</text>
  4. </template>

You can use the item template by importing item.axml in index.axml.

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

The scope of import is limited. It only imports the template that is defined in the target file, and the template being imported in the target file will not be imported.

For example, C imports B, B imports A, then the template defined in B can be used in C, and the template defined in A can be used in B. However, C cannot use the template defined in A.

  1. <!-- a.axml -->
  2. <template name="A">
  3. <text> A template </text>
  4. </template>
  1. <!-- b.axml -->
  2. <import src="./a.axml"/>
  3. <template name="B">
  4. <text> B template </text>
  5. </template>
  1. <!-- c.axml -->
  2. <import src="./b.axml"/>
  3. <template is="A"/> <! -- Note: You cannot use import A -->
  4. <template is="B"/>

A template can only have one child node, for example:

Correct example:

  1. <template name="x">
  2. <view />
  3. </template>

Error example:

  1. <template name="x">
  2. <view />
  3. <view />
  4. </template>

include

include can introduce the entire code of the target file excluding <template/>, which is equivalent to copying the code to the location of include.

Code sample:

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

Introduction path

The template introduction path supports relative path and absolute path. You can also load third-party modules from the node_modules directory.

  1. <import src="./a.axml"/> <! -- Relative path -->
  2. <import src="/a.axml"/> <! -- Project absolute path -->
  3. <import src="third-party/x.axml"/> <! -- Third-party npm package path -->