AppML 如何使用

如何通过 两个简单 的步骤构建 AppML 应用程序。

1. 使用 HTML 和 CSS 创建页面

HTML

<!DOCTYPE html>
<html>
<link rel="stylesheet" href="/example/appml/style.css">
<title>Customers</title>
<body>
<h2>Customers</h2>
<table>
<tr>
  <th>Customer</th>
  <th>City</th>
  <th>Country</th>
</tr>
<tr>
  <td>{{CustomerName}}</td>
  <td>{{City}}</td>
  <td>{{Country}}</td>
</tr>
</table>
</body>
</html>

运行一下

{{ }} 括号 是 AppML 数据的占位符。

CSS

body {
  font: 14px Verdana, sans-serif;
}
h1 {
  color: #996600;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid grey;
  padding: 5px;
  text-align: left;
}
table tr:nth-child(odd) {
  background-color: #f1f1f1;
}

可以用自己喜欢的样式表替换 CSS。

2. 添加 AppML

使用 AppML 向页面添加数据:

实例

<!DOCTYPE html>
<html>
<title>Customers</title>
<link rel="stylesheet" href="/example/appml/style.css">
<script src="https://cankaoshouce.com/js/appml/appml.js"></script>
<body>
<h2>Customers</h2>
<table appml-data="/example/appml/customers.js">
  <tr>
    <th>Customer</th>
    <th>City</th>
    <th>Country</th>
  </tr>
  <tr appml-repeat="records">
    <td>{{CustomerName}}</td>
    <td>{{City}}</td>
    <td>{{Country}}</td>
  </tr>
</table>
</body>
</html>

运行一下

AppML 解释:

appml data="/example/appml/customers.js" 将 appml 数据（customers.js）连接到HTML元素（<table>）。

在本例中，我们使用了一个 JSON 文件: customers.js

appml-repeat="records" 为数据对象中的每个项（记录）重复一个 HTML 元素（<tr>）。