appml-include-html, appml-controller (ok)
https://www.w3schools.com/appml/appml_controllers.asp
Last updated
Was this helpful?
https://www.w3schools.com/appml/appml_controllers.asp
Last updated
Was this helpful?
C:\xampp\htdocs\abc\index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Customers</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<link rel="stylesheet" href="style.css">
<script src="http://localhost/library/appml/appml.js"></script>
</head>
<body>
<h1>Customers</h1>
<div appml-data="customers.js" appml-controller="myController">
<table>
<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>
</div>
<div appml-include-html="inc_footer.html"></div>
<script type="text/javascript">
function myController($appml) {
if ($appml.message == "display") {
if ($appml.display.name == "CustomerName") {
$appml.display.value = $appml.display.value.toUpperCase();
}
}
}
</script>
</body>
</html>C:\xampp\htdocs\abc\inc_footer.html
<hr style="margin-top:10px;">
<p style="font-size:11px">2016© W3Schools. All rights reserved.</p>
<hr>C:\xampp\htdocs\abc\style.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;
}C:\xampp\htdocs\abc\customers.js
{
"records": [
{ "CustomerName": "Alfreds Futterkiste", "City": "Berlin", "Country": "Germany" },
{ "CustomerName": "Ana Trujillo Emparedados y helados", "City": "México D.F.", "Country": "Mexico" },
{ "CustomerName": "Antonio Moreno Taquería", "City": "México D.F.", "Country": "Mexico" },
{ "CustomerName": "Around the Horn", "City": "London", "Country": "UK" },
{ "CustomerName": "B's Beverages", "City": "London", "Country": "UK" },
{ "CustomerName": "Berglunds snabbköp", "City": "Luleå", "Country": "Sweden" },
{ "CustomerName": "Blauer See Delikatessen", "City": "Mannheim", "Country": "Germany" },
{ "CustomerName": "Blondel père et fils", "City": "Strasbourg", "Country": "France" },
{ "CustomerName": "Bólido Comidas preparadas", "City": "Madrid", "Country": "Spain" },
{ "CustomerName": "Bon app'", "City": "Marseille", "Country": "France" },
{ "CustomerName": "Bottom-Dollar Marketse", "City": "Tsawassen", "Country": "Canada" },
{ "CustomerName": "Cactus Comidas para llevar", "City": "Buenos Aires", "Country": "Argentina" },
{ "CustomerName": "Centro comercial Moctezuma", "City": "México D.F.", "Country": "Mexico" },
{ "CustomerName": "Chop-suey Chinese", "City": "Bern", "Country": "Switzerland" },
{ "CustomerName": "Comércio Mineiro", "City": "São Paulo", "Country": "Brazil" }
]
}