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 4 years ago

<!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>

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; }

{ "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" } ] }