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

案例研究演示了如何构建一个完整的 <AppML> 互联网应用程序，具有针对数据库中的若干表进行信息列举、编辑和搜索的功能。

添加 HTML 模板

我们将演示如何向 HTML 页面添加 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模板引擎，它可以将数据与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。

Templates 的概念

引用 MDN 上的原话是：

HTML内容模板（<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以(原文为 may be)在运行时使用 JavaScript 实例化。
将模板视为一个可存储在文档中以便后续使用的内容片段。虽然解析器在加载页面时确实会处理**<template>**元素的内容，但这样做只是为了确保这些内容有效；但元素内容不会被渲染。

通过这个概念解释，我们可以知道关于 Templates 的以下几点：

它是在 HTML 页面中使用的一组元素标签，即 <template></template>；
它在 HTML 页面解析的过程中会被处理，但不会呈现在页面上；
它可以被 JavaScript 获取到。

Templates 是较早之前出现的，比 Web Components 更早。

Templates 的属性

Templates 除了全局属性（也就是所有 HTML 元素所共有的属性）外，只有一个私有属性：content，这个属性是只读的，返回 Templates 内部的文档片段对象及其 DOM 结构。

在控制台操控一下template，结果如下：

我们可以将 templateEle.content 当做一个正常的 document 对象来使用。

简单使用 Templates

仅 HTML + Templates

<body>
    <h1>使用 Templates</h1>
    <template>
        <div>
            这是 template 标签内的子节点内容
        </div>
    </template>
</body>

页面显示效果如下：

符合以上两点：被解析、不渲染。

使用 JS

如果想要将 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 的兼容性

结束语

Templates 可以将一些页面内容事先封装并且保存在 HTML 页面上，且不进行渲染，随后可以使用 JS 来操作 Templates。

以上就是 Templates 的有关知识点。

~ 本文完，感谢阅读！

学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！
大家好，我是〖编程三昧〗的作者隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！

在线咨询

上一篇：Vue.js-过渡系统
下一篇：JavaFX UI 控件之RadioButton

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

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

言