AppML 架构
模型、数据源、模板、控制器四层，以及请求如何流转。
Key PointsAppML 把「数据从哪来」「字段是什么」「怎么显示」拆成三层，控制器负责粘合与自定义逻辑。
四层结构
Text
index.html
│ 引用 appml.js，声明 <appml-app src="model.xml">
▼
model.xml ──── datasource ──── 数据源（数据库 / JSON / REST）
│ └── items ──────── 字段定义（类型、标签、校验）
│ └── html ───────── 页面标题、布局提示
▼
template（可选）── 自定义列表行与表单的 HTML 结构
▼
controller（可选）── 自定义 JS：事件、格式化、联动模型的三块
XML
<appml>
<!-- 1. 数据源 -->
<datasource>
<database name="demo"></database>
<query>SELECT id, name, city, credit FROM customers</query>
</datasource>
<!-- 2. 字段定义 -->
<items>
<item name="id" label="编号" type="number" primarykey="true"/>
<item name="name" label="姓名" required="true"/>
<item name="city" label="城市"/>
<item name="credit" label="额度" type="number"/>
</items>
<!-- 3. 页面信息 -->
<html>
<title>客户管理</title>
</html>
</appml>items is the heart of the model: the type picks the form control (number → numeric input, date → date picker), required drives validation, and primarykey decides which field identifies a record for updates and deletes.
数据源的类型
| Type | Declaration | Use |
|---|---|---|
| Database | <database name="x"> + <query> | 需要服务端中间层 |
| JSON file | <query> 指向 .json | 静态演示 |
| REST API | 模型里写 URL | 真实项目 |
XML
<!-- 直接读一个 JSON 文件，不需要后端 -->
<appml>
<datasource>
<query>data/customers.json</query>
</datasource>
<items>
<item name="id" label="编号"/>
<item name="name" label="姓名"/>
</items>
</appml>模板的作用
HTML
<appml-app src="model.xml">
<appml-template view="list">
<div class="card">
<h3>{{name}}</h3>
<p>{{city}} · 额度 {{credit}}</p>
</div>
</appml-template>
</appml-app>Without a template AppML renders a default table; with one it follows your HTML and {{field}} placeholders get replaced. That lets you apply Bootstrap or your own CSS classes.
控制器的位置
JavaScript
function myController(appml) {
appml.onload = function () {
console.log('数据加载完成，共 ' + appml.data.length + ' 条');
};
appml.onerror = function (err) {
console.error('加载失败', err);
};
}HTML
<appml-app src="model.xml" controller="myController"></appml-app>AppML controllers are global function names given as strings, not modules. With several apps on one page the names must be unique or the later one overwrites the earlier — a nasty bug in single-page setups.
请求流转
- 页面解析
<appml-app>，按src读取模型 - 按
datasource取数据（文件或接口） - 按
items与模板渲染列表 / 表单 - 用户操作触发增删改，按
primarykey定位记录 - 回调控制器里的
onload/onerror
四层结构
Text
index.html
│ 引用 appml.js，声明 <appml-app src="model.xml">
▼
model.xml ──── datasource ──── 数据源（数据库 / JSON / REST）
│ └── items ──────── 字段定义（类型、标签、校验）
│ └── html ───────── 页面标题、布局提示
▼
template（可选）── 自定义列表行与表单的 HTML 结构
▼
controller（可选）── 自定义 JS：事件、格式化、联动模型的三块
XML
<appml>
<!-- 1. 数据源 -->
<datasource>
<database name="demo"></database>
<query>SELECT id, name, city, credit FROM customers</query>
</datasource>
<!-- 2. 字段定义 -->
<items>
<item name="id" label="编号" type="number" primarykey="true"/>
<item name="name" label="姓名" required="true"/>
<item name="city" label="城市"/>
<item name="credit" label="额度" type="number"/>
</items>
<!-- 3. 页面信息 -->
<html>
<title>客户管理</title>
</html>
</appml>items 是模型的灵魂：字段类型决定表单控件（number → 数字输入框，date → 日期选择器），required 决定校验，primarykey 决定增删改时用哪个字段定位记录。
数据源的类型
| 类型 | 写法 | 适用 |
|---|---|---|
| 数据库 | <database name="x"> + <query> | 需要服务端中间层 |
| JSON 文件 | <query> 指向 .json | 静态演示 |
| REST 接口 | 模型里写 URL | 真实项目 |
XML
<!-- 直接读一个 JSON 文件，不需要后端 -->
<appml>
<datasource>
<query>data/customers.json</query>
</datasource>
<items>
<item name="id" label="编号"/>
<item name="name" label="姓名"/>
</items>
</appml>模板的作用
HTML
<appml-app src="model.xml">
<appml-template view="list">
<div class="card">
<h3>{{name}}</h3>
<p>{{city}} · 额度 {{credit}}</p>
</div>
</appml-template>
</appml-app>不给模板时 AppML 用默认表格渲染；给了模板就按你的 HTML 结构走，{{字段名}} 会被替换成数据。这让你能用 Bootstrap 或自己的 CSS 类。
控制器的位置
JavaScript
function myController(appml) {
appml.onload = function () {
console.log('数据加载完成，共 ' + appml.data.length + ' 条');
};
appml.onerror = function (err) {
console.error('加载失败', err);
};
}HTML
<appml-app src="model.xml" controller="myController"></appml-app>AppML 的控制器是全局函数名（字符串），不是模块。多个应用共存时函数名必须唯一，否则后加载的会覆盖前一个——这类问题在单页应用里特别难查。
请求流转
- 页面解析
<appml-app>，按src读取模型 - 按
datasource取数据（文件或接口） - 按
items与模板渲染列表 / 表单 - 用户操作触发增删改，按
primarykey定位记录 - 回调控制器里的
onload/onerror