&lt;AppML&gt; 案例研究-HTML 模板

案例研究演示了如何構(gòu)建一個(gè)完整的 <AppML> 互聯(lián)網(wǎng)應(yīng)用程序，具有針對(duì)數(shù)據(jù)庫(kù)中的若干表進(jìn)行信息列舉、編輯和搜索的功能。

添加 HTML 模板

我們將演示如何向 HTML 頁(yè)面添加 HTML 模板。

列出客戶

HTML - View

<h1>Customers</h1>

<tr>

<th>Customer</th>

<th>Country</th>

</tr>

<td>#CustomerName#</td>

<td>#Country#</td>

</tr>

</table>

var customers

customers=new AppML("appml.php","Models/Customers");

customers.run("List01","Template01");

</script>

rt-lemplate是新一代高性能JavaScript模板引擎，它可以將數(shù)據(jù)與HTML模板更加友好地結(jié)合起來，省去煩瑣的字符串拼接，使代碼更易于維護(hù)。

art-template模板引擎既可以在服務(wù)器端使用，也可以在瀏覽器端使用。此處僅講解art-template模板引擎在服務(wù)器端的使用。art-template模板引擎的下載和使用方法如下。

（1）模板引擎下載命令如下。

npm install artmplate

（2）使用模板引擎時(shí)應(yīng)在j腳本中導(dǎo)入模板引擎，并編譯模板。

//導(dǎo)入模板
const template · require('art-template');
//編譯模板
const result = template('./views/index.html', (
  msg: 'Hello, art-template'
});

上述代碼中，rest用于存儲(chǔ)拼接結(jié)果;template0中的第l個(gè)參數(shù)表示模板文件的位置，第2個(gè)參數(shù)向模板中傳遞要拼接的數(shù)據(jù)，對(duì)象類型或?qū)ο髮傩远伎梢灾苯釉谀０逯惺褂谩n-template模板引擎標(biāo)準(zhǔn)語法中引入了變量和輸出量，并支持JavaSeript表達(dá)式，使模板更易于讀寫。下面講解art-template模板引擎的標(biāo)準(zhǔn)語法。

1.變量

在“{{}}”符號(hào)中，使用set關(guān)鍵字來定義變量a和變量b.示例代碼如下。

{{set a = 1}};
{{set b = 2}};

2.JavaScript表達(dá)式

在“{{}}”符號(hào)中，使用set關(guān)鍵字來定義變量a和變量b，示例代碼如下。

//JavaScript表達(dá)式
{{a ? b:c}};
{{a‖b}}1:
{{la + b}};

3.條件渲染

art-template模板引擎使用{{f}}…{{/if}}或者 {{if}}…{{ else if}}…{{/if}}來實(shí)現(xiàn)條件的判斷，通過判斷來渲染不同結(jié)果，示例代碼如下。

// 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用戶對(duì)象存在，就將其name屬性的值渲染到<h2>標(biāo)簽中。同理，使用[if]]…lelse if]]…[if]語法實(shí)現(xiàn)多個(gè)條件判斷。如果userl用戶對(duì)象存在，就將其name屬性的值渲染到<hl>標(biāo)簽中;如果user2用戶對(duì)象存在，就將其name屬性的值渲染到<h2>標(biāo)簽中。

4.列表渲染

at-lemplate模板引擎中的列表渲染使用each實(shí)現(xiàn)對(duì)目標(biāo)對(duì)象的循環(huán)遍歷，示例代碼如下。

{{each target}}
  {{$index}}{{$value}}
{{/each}}

上述代碼中，target 目標(biāo)對(duì)象支持Amay數(shù)組和Objecet對(duì)象類型數(shù)據(jù)的迭代，target 目標(biāo)對(duì)象使用template(模板ID，data)函數(shù)的第2個(gè)參數(shù)來傳遞，使用“$data[]”中括號(hào)的形式來訪問模板對(duì)象的屬性。$index表示當(dāng)前索引值，$value表示當(dāng)前索引對(duì)應(yīng)的值。

言

在之前介紹創(chuàng)建 Custom Elements 的代碼中，有一個(gè)地方是比較繁瑣的：Shadow DOM 中的每個(gè)子元素都是通過 document.createElement 方法創(chuàng)建的。就像下面這樣的：

那到底有沒有方法能簡(jiǎn)化這一步操作呢？答案是有的，就是我們今天要介紹的主角 —— Template。

Templates 的概念

引用 MDN 上的原話是：

HTML內(nèi)容模板（<template>）元素是一種用于保存客戶端內(nèi)容機(jī)制，該內(nèi)容在加載頁(yè)面時(shí)不會(huì)呈現(xiàn)，但隨后可以(原文為 may be)在運(yùn)行時(shí)使用 JavaScript 實(shí)例化。
將模板視為一個(gè)可存儲(chǔ)在文檔中以便后續(xù)使用的內(nèi)容片段。雖然解析器在加載頁(yè)面時(shí)確實(shí)會(huì)處理**<template>**元素的內(nèi)容，但這樣做只是為了確保這些內(nèi)容有效；但元素內(nèi)容不會(huì)被渲染。

通過這個(gè)概念解釋，我們可以知道關(guān)于 Templates 的以下幾點(diǎn)：

它是在 HTML 頁(yè)面中使用的一組元素標(biāo)簽，即 <template></template>；
它在 HTML 頁(yè)面解析的過程中會(huì)被處理，但不會(huì)呈現(xiàn)在頁(yè)面上；
它可以被 JavaScript 獲取到。

Templates 是較早之前出現(xiàn)的，比 Web Components 更早。

Templates 的屬性

Templates 除了全局屬性（也就是所有 HTML 元素所共有的屬性）外，只有一個(gè)私有屬性：content，這個(gè)屬性是只讀的，返回 Templates 內(nèi)部的文檔片段對(duì)象及其 DOM 結(jié)構(gòu)。

在控制臺(tái)操控一下template，結(jié)果如下：

我們可以將 templateEle.content 當(dāng)做一個(gè)正常的 document 對(duì)象來使用。

簡(jiǎn)單使用 Templates

僅 HTML + Templates

<body>
    <h1>使用 Templates</h1>
    <template>
        <div>
            這是 template 標(biāo)簽內(nèi)的子節(jié)點(diǎn)內(nèi)容
        </div>
    </template>
</body>

頁(yè)面顯示效果如下：

符合以上兩點(diǎn)：被解析、不渲染。

使用 JS

如果想要將 Templates 中的節(jié)點(diǎn)內(nèi)容加載到當(dāng)前頁(yè)面顯示出來，我們可以使用一下 JS 代碼實(shí)現(xiàn)：

// 獲取 template 元素
const templateEle = document.querySelector("template");
// 獲取 template 元素包含的文檔片段
const content = templateEle.content;
// content 可以當(dāng)做正常的 document 來使用
const node = content.querySelector("div");
// 追加節(jié)點(diǎn)到當(dāng)前文檔
document.body.appendChild(node);

最終效果如下：

但是這樣操作的話，就存在一個(gè)缺陷，由于將 Templates 代碼片段內(nèi)部的 div 追加到了當(dāng)前文檔結(jié)構(gòu)，所以 Templates 內(nèi)部的 div 節(jié)點(diǎn)消失。

為了避免修改內(nèi)容模板內(nèi)部的 DOM 結(jié)構(gòu)，我們可以先克隆模板內(nèi)部的元素節(jié)點(diǎn)，再將克隆的節(jié)點(diǎn)追到到當(dāng)前文檔：

// 獲取 template 元素
const templateEle = document.querySelector("template");
// 獲取 template 元素包含的文檔片段
const content = templateEle.content;
// content 可以當(dāng)做正常的 document 來使用
const node = content.querySelector("div");
// 導(dǎo)入 node 到 當(dāng)前文檔
// 必須要有這一步
const cloneNode = document.importNode(node, true);
// 也可以使用 cloneNode
// const cloneNode = node.cloneNode(true);
// 追加節(jié)點(diǎn)到當(dāng)前文檔
document.body.appendChild(cloneNode);

Templates 的兼容性

結(jié)束語

Templates 可以將一些頁(yè)面內(nèi)容事先封裝并且保存在 HTML 頁(yè)面上，且不進(jìn)行渲染，隨后可以使用 JS 來操作 Templates。

以上就是 Templates 的有關(guān)知識(shí)點(diǎn)。

~ 本文完，感謝閱讀！

學(xué)習(xí)有趣的知識(shí)，結(jié)識(shí)有趣的朋友，塑造有趣的靈魂！
大家好，我是〖編程三昧〗的作者隱逸王，我的公眾號(hào)是『編程三昧』，歡迎關(guān)注，希望大家多多指教！

在線咨詢

上一篇：Vue.js-過渡系統(tǒng)
下一篇：JavaFX UI 控件之RadioButton

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

&amp;lt;AppML&amp;gt; 案例研究-HTML 模板

言