AppML 参考手册
模型元素、item 属性、方法与事件的速查。
Key Points模型里能写什么、item 支持哪些属性、JS 侧有哪些方法和事件，都在这一页。
模型元素
| Element | Purpose |
|---|---|
<appml> | 整个模型的容器 |
<datasource> | 声明数据从哪来 |
<database> | 指定数据库连接名 |
<query> | SQL 或数据文件路径 |
<items> | 包含若干 <item> |
<item> | 一个字段的定义 |
<html> | 标题、说明 |
<filter> | 搜索 / 筛选条件 |
<orderby> | 默认排序字段 |
item 属性
XML
<item name="name"
label="姓名"
type="text"
required="true"
primarykey="false"
readonly="false"
default=""
width="120"
align="left"
pattern="[A-Za-z\u4e00-\u9fa5]+"
maxlength="50"
min="0"
max="9999"
step="1"/>| Attribute | Meaning |
|---|---|
name | 对应数据里的键 |
label | 表格列头与表单标签 |
type | text / number / date / email / password / checkbox / textarea |
required | 空值时阻止提交 |
primarykey | 增删改时定位记录 |
readonly | 表单里不可编辑 |
pattern | 自定义格式校验 |
maxlength | 输入框限制 |
JS 方法与事件
JavaScript
// 通过 id 拿到应用实例
const app = document.getElementById('myapp').appml;
app.data; // 当前数据集
app.displayRecord(3); // 显示第 4 条
app.newRecord(); // 新建空记录
app.saveRecord(); // 保存当前记录
app.deleteRecord(); // 删除当前记录
app.filter('city', '北京'); // 过滤
app.onload = function () { /* 数据加载完成 */ };
app.onerror = function (e) { /* 出错 */ };
app.onsave = function (rec) { /* 保存后 */ };
app.ondelete = function (rec) { /* 删除后 */ };app.data is a plain array usable with length, filter, map. To render yourself, skip templates entirely and build the DOM from app.data.
视图
HTML
<appml-view view="list"></appml-view>
<appml-view view="form"></appml-view>
<appml-view view="search"></appml-view>| View | Renders |
|---|---|
list | 表格或多卡片列表 |
form | 按 items 生成的编辑表单 |
search | 搜索框与筛选条件 |
AppML's API shifts between minor versions (attribute and event names change), and this reference targets 2.0.x. Check the actual CDN version before mixing in 1.x syntax.
最小可运行示例
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/appml.js"></script>
</head>
<body>
<appml-app src="models/customers.xml"></appml-app>
</body>
</html>XML
<appml>
<datasource><query>data/customers.json</query></datasource>
<items>
<item name="id" label="编号" type="number" primarykey="true"/>
<item name="name" label="姓名" required="true"/>
<item name="city" label="城市"/>
</items>
</appml>JSON
[
{ "id": 1, "name": "张伟", "city": "北京" },
{ "id": 2, "name": "李娜", "city": "上海" },
{ "id": 3, "name": "王强", "city": "广州" }
]Output
编号 姓名 城市
1 张伟 北京
2 李娜 上海
3 王强 广州模型元素
| 元素 | 用途 |
|---|---|
| 根元素 | 整个模型的容器 |
| 数据源 | 声明数据从哪来 |
| 数据库 | 指定数据库连接名 |
| 查询 | SQL 或数据文件路径 |
| 字段集合 | 包含若干 <item> |
| 字段 | 一个字段的定义 |
| 页面信息 | 标题、说明 |
| 过滤 | 搜索 / 筛选条件 |
| 排序 | 默认排序字段 |
item 属性
XML
<item name="name"
label="姓名"
type="text"
required="true"
primarykey="false"
readonly="false"
default=""
width="120"
align="left"
pattern="[A-Za-z\u4e00-\u9fa5]+"
maxlength="50"
min="0"
max="9999"
step="1"/>| 属性 | 含义 |
|---|---|
| 字段名 | 对应数据里的键 |
| 显示名 | 表格列头与表单标签 |
| 类型 | text / number / date / email / password / checkbox / textarea |
| 必填 | 空值时阻止提交 |
| 主键 | 增删改时定位记录 |
| 只读 | 表单里不可编辑 |
| 正则 | 自定义格式校验 |
| 最大长度 | 输入框限制 |
JS 方法与事件
JavaScript
// 通过 id 拿到应用实例
const app = document.getElementById('myapp').appml;
app.data; // 当前数据集
app.displayRecord(3); // 显示第 4 条
app.newRecord(); // 新建空记录
app.saveRecord(); // 保存当前记录
app.deleteRecord(); // 删除当前记录
app.filter('city', '北京'); // 过滤
app.onload = function () { /* 数据加载完成 */ };
app.onerror = function (e) { /* 出错 */ };
app.onsave = function (rec) { /* 保存后 */ };
app.ondelete = function (rec) { /* 删除后 */ };app.data 是一个普通数组，可以直接用 length、filter、map。想自己渲染表格完全可以不写模板，取到数据后手写 DOM。
视图
HTML
<appml-view view="list"></appml-view>
<appml-view view="form"></appml-view>
<appml-view view="search"></appml-view>| 视图 | 渲染 |
|---|---|
| 列表 | 表格或多卡片列表 |
| 表单 | 按 items 生成的编辑表单 |
| 搜索 | 搜索框与筛选条件 |
AppML 的 API 在不同小版本之间会变（属性名、事件名都可能不同），这份速查以 2.0.x 为准。用之前先看一眼 CDN 上的实际版本号，别把 1.x 的写法用到 2.x 上。
最小可运行示例
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="js/appml.js"></script>
</head>
<body>
<appml-app src="models/customers.xml"></appml-app>
</body>
</html>XML
<appml>
<datasource><query>data/customers.json</query></datasource>
<items>
<item name="id" label="编号" type="number" primarykey="true"/>
<item name="name" label="姓名" required="true"/>
<item name="city" label="城市"/>
</items>
</appml>JSON
[
{ "id": 1, "name": "张伟", "city": "北京" },
{ "id": 2, "name": "李娜", "city": "上海" },
{ "id": 3, "name": "王强", "city": "广州" }
]Output
编号 姓名 城市
1 张伟 北京
2 李娜 上海
3 王强 广州