整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
案例研究演示了如何構建一個完整的 <AppML> 互聯網應用程序，具有針對數據庫中的若干表進行信息列舉、編輯和搜索的功能。
添加 HTML 模板
我們將演示如何向 HTML 頁面添加 HTML 模板。
列出客戶
HTML - View
<h1>Customers</h1>
<div id="List01"></div><br>
<table id="Template01" class="appmltable" style="display:none">
<tr>
<th>Customer</th>
<th>City</th>
<th>Country</th>
</tr>
<tr id="appml_row">
<td>#CustomerName#</td>
<td>#City#</td>
<td>#Country#</td>
</tr>
</table>
<script src="appml.js"></script>
<script>
var customers
customers=new AppML("appml.php","Models/Customers");
customers.run("List01","Template01");
</script>
rt-lemplate是新一代高性能JavaScript模板引擎，它可以將數據與HTML模板更加友好地結合起來，省去煩瑣的字符串拼接，使代碼更易于維護。
art-template模板引擎既可以在服務器端使用，也可以在瀏覽器端使用。此處僅講解art-template模板引擎在服務器端的使用。art-template模板引擎的下載和使用方法如下。
（1）模板引擎下載命令如下。
npm install artmplate（2）使用模板引擎時應在j腳本中導入模板引擎，并編譯模板。
//導入模板
const template · require('art-template');
//編譯模板
const result = template('./views/index.html', (
msg: 'Hello, art-template'
});上述代碼中，rest用于存儲拼接結果;template0中的第l個參數表示模板文件的位置，第2個參數向模板中傳遞要拼接的數據，對象類型或對象屬性都可以直接在模板中使用。an-template模板引擎標準語法中引入了變量和輸出量，并支持JavaSeript表達式，使模板更易于讀寫。下面講解art-template模板引擎的標準語法。
1.變量
在“{{}}”符號中，使用set關鍵字來定義變量a和變量b.示例代碼如下。
{{set a = 1}};
{{set b = 2}};2.JavaScript表達式
在“{{}}”符號中，使用set關鍵字來定義變量a和變量b，示例代碼如下。
//JavaScript表達式
{{a ? b:c}};
{{a‖b}}1:
{{la + b}};3.條件渲染
art-template模板引擎使用{{f}}…{{/if}}或者 {{if}}…{{ else if}}…{{/if}}來實現條件的判斷，通過判斷來渲染不同結果，示例代碼如下。
// if...語法
{{if user}}
<h2>{{user.name}}</h2>
{{/if}}
// if...else if...語法
{{if userl}}
<h1>{{user1.name}}</h1>
{{else if user2}}
<h2>{{user2.name}}</h2>
{{/if}}上述代碼中，如果user用戶對象存在，就將其name屬性的值渲染到<h2>標簽中。同理，使用[if]]…lelse if]]…[if]語法實現多個條件判斷。如果userl用戶對象存在，就將其name屬性的值渲染到<hl>標簽中;如果user2用戶對象存在，就將其name屬性的值渲染到<h2>標簽中。
4.列表渲染
at-lemplate模板引擎中的列表渲染使用each實現對目標對象的循環遍歷，示例代碼如下。
{{each target}}
{{$index}}{{$value}}
{{/each}}上述代碼中，target 目標對象支持Amay數組和Objecet對象類型數據的迭代，target 目標對象使用template(模板ID，data)函數的第2個參數來傳遞，使用“$data[]”中括號的形式來訪問模板對象的屬性。$index表示當前索引值，$value表示當前索引對應的值。
在之前介紹創建 Custom Elements 的代碼中，有一個地方是比較繁瑣的：Shadow DOM 中的每個子元素都是通過 document.createElement 方法創建的。就像下面這樣的：
那到底有沒有方法能簡化這一步操作呢？答案是有的，就是我們今天要介紹的主角 —— Template。
引用 MDN 上的原話是：
HTML內容模板（<template>）元素是一種用于保存客戶端內容機制，該內容在加載頁面時不會呈現，但隨后可以(原文為 may be)在運行時使用 JavaScript 實例化。
將模板視為一個可存儲在文檔中以便后續使用的內容片段。雖然解析器在加載頁面時確實會處理**<template>**元素的內容，但這樣做只是為了確保這些內容有效；但元素內容不會被渲染。
通過這個概念解釋，我們可以知道關于 Templates 的以下幾點：
Templates 是較早之前出現的，比 Web Components 更早。
Templates 除了全局屬性（也就是所有 HTML 元素所共有的屬性）外，只有一個私有屬性 ：content，這個屬性是只讀的，返回 Templates 內部的文檔片段對象及其 DOM 結構。
在控制臺操控一下template，結果如下：
我們可以將 templateEle.content 當做一個正常的 document 對象來使用。
<body>
<h1>使用 Templates</h1>
<template>
<div>
這是 template 標簽內的子節點內容
</div>
</template>
</body>
頁面顯示效果如下：
符合以上兩點：被解析、不渲染。
如果想要將 Templates 中的節點內容加載到當前頁面顯示出來，我們可以使用一下 JS 代碼實現：
// 獲取 template 元素
const templateEle = document.querySelector("template");
// 獲取 template 元素包含的文檔片段
const content = templateEle.content;
// content 可以當做正常的 document 來使用
const node = content.querySelector("div");
// 追加節點到當前文檔
document.body.appendChild(node);
最終效果如下：
但是這樣操作的話，就存在一個缺陷，由于將 Templates 代碼片段內部的 div 追加到了當前文檔結構，所以 Templates 內部的 div 節點消失。
為了避免修改內容模板內部的 DOM 結構，我們可以先克隆模板內部的元素節點，再將克隆的節點追到到當前文檔：
// 獲取 template 元素
const templateEle = document.querySelector("template");
// 獲取 template 元素包含的文檔片段
const content = templateEle.content;
// content 可以當做正常的 document 來使用
const node = content.querySelector("div");
// 導入 node 到 當前文檔
// 必須要有這一步
const cloneNode = document.importNode(node, true);
// 也可以使用 cloneNode
// const cloneNode = node.cloneNode(true);
// 追加節點到當前文檔
document.body.appendChild(cloneNode);
Templates 可以將一些頁面內容事先封裝并且保存在 HTML 頁面上，且不進行渲染，隨后可以使用 JS 來操作 Templates。
以上就是 Templates 的有關知識點。
~
~ 本文完，感謝閱讀！
~
學習有趣的知識，結識有趣的朋友，塑造有趣的靈魂！
大家好，我是〖編程三昧〗的作者 隱逸王，我的公眾號是『編程三昧』，歡迎關注，希望大家多多指教！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
