appml-include-html, appml-controller (ok)

https://www.w3schools.com/appml/appml_controllers.asp

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&copy; 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" }
  ]
}

PreviousAppML Tutorial (ok)NextAppML Messages (ok)

Last updated

Was this helpful?