AppML - 環境

使用 AppML 非常簡單。只需在 HTML 頁面中使用 <script> 標籤引用 JavaScript 檔案，然後部署到 Web 伺服器即可。

Web 伺服器 − PHP 幾乎可以與所有 Web 伺服器軟體配合使用，包括微軟的 Internet Information Server (IIS)，但最常用的是 Apache 伺服器。在此處免費下載 Apache − https://httpd.apache.org/download.cgi

可以透過以下方式訪問 appml.js −

您可以從其官方網站下載 appml.js

現在，請參考以下程式碼中所示的檔案。

<script type = 'text/javascript' src = 'appml.js'></script>

更新 src 屬性以匹配下載檔案所在的路徑。

您可以直接從 W3Schools 引用 appml.js 庫 −

<script src = "https://w3schools.tw/appml/2.0.3/appml.js" 
   type = "text/javascript"></script>

注意 − 在本教程的所有章節中，我們都引用了 W3Schools 版本的 AppML 庫。

示例

AppML 基於模型-檢視-控制器 (MVC) 模式。讓我們來看一個 AppML 的簡單示例。

<!DOCTYPE html>
<html lang="en-US">
   <title>Students</title>
   <style>	  
      table {
         border-collapse: collapse;
         width: 100%;
      }

      th, td {
         text-align: left;
         padding: 8px;
      }

      tr:nth-child(even) {background-color: #f2f2f2;}
   </style>
   <script src="https://w3schools.tw/appml/2.0.3/appml.js"></script>
<body>
   <table appml-data="students">
      <tr>
         <th>Student</th>
         <th>Class</th>
         <th>Section</th>
      </tr>
      <tr appml-repeat="records">
         <td>{{studentName}}</td>
         <td>{{class}}</td>
         <td>{{section}}</td>
      </tr>
   </table>
   <script>
   var students = {
      "records":[
         {"studentName":"Ramesh","class":"12","section":"White"},
         {"studentName":"Suresh","class":"12","section":"Red"},
         {"studentName":"Mohan","class":"12","section":"Red"},
         {"studentName":"Robert","class":"12","section":"Red"},
         {"studentName":"Julie","class":"12","section":"White"},
         {"studentName":"Ali","class":"12","section":"White"},
         {"studentName":"Harjeet","class":"12","section":"White"}
   ]};
   </script>
</body>
</html>

以下行引用了 AppML 庫。

<script src = "https://w3schools.tw/appml/2.0.3/appml.js" 
   type = "text/javascript"> </script>

此行引用 AppML 庫。

我們在表格中添加了一個屬性 app-data 來引用 students 物件。它可以是 json、txt、xml 甚至資料庫模型。

<p>First String: < input data-bind = "value: firstString" /> </p>

這就是我們在 body 部分使用'appml-data' 屬性將 ViewModel 中的值繫結到 HTML 元素的方式。

輸出

將上述程式碼儲存為my_first_appml_program.html。將檔案部署到 Web 伺服器並訪問該檔案。驗證輸出。

下載 appml.php

從 W3Schools 下載檔案 https://w3schools.tw/appml/2.0.3/appml.php.txt 將檔案複製到您的網站並將其重新命名為 appml.php。它將在接下來的示例中用於載入 appml 模型。

appml_config.php

建立 appml_config.php 幷包含以下內容。

<?php echo("Access Forbidden");exit();?>
{
"dateformat" : "yyyy-mm-dd"
}

列印頁面