HTML 模板引擎之Handlebars.js
模板原理
模板的诞生是为了将显示与数据分离,模板技术多种多样,但其本质是将模板文件和数据通过模板引擎生成最终的HTML代码
介绍
Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译, 这样可以保证模板加载和运行的速度。Handlebars兼容Mustache,你可以在Handlebars中导入Mustache模板。
使用与安装
1. 下载Handlebars
- 通过Handlebars官网下载: http://handlebarsjs.com./installation.html
-
通过npm下载:
npm install --save handlebars
-
通过bower下载:
bower install --save handlebars
- 通过Github下载: https://github.com/daaain/Handlebars.git
- 通过CDN引入:https://cdnjs.com/libraries/handlebars.js
2. 引入Handlebars
通过<script>
标签引入即可,和引入jQuery库类似:
<script src="./js/handlebars-1.0.0.beta.6.js"></script>
3. 创建模板
-
步骤一: 通过一个
<script>
将需要的模板包裹起来 -
步骤二: 在
<script>
标签中填入type
和id
-
type
类型可以是除text/javascript
以外的任何MIME类型,但推荐使用type="text/template"
,更加语义化 -
id
是在后面进行编译的时候所使用,让其编译的代码找到该模板.
-
-
步骤三: 在
<script>
标签中插入我们需要的html代码,根据后台给我们的接口文档,修改其需要动态获取的内容
<script type="text/template" id="myTemplate">
<div class="demo">
<h1>{{name}}</h1>
<p>{{content}}</p>
</div>
</script>
4. 在JS代码中编译模板
//用jQuery获取模板
var tpl = $("#myTemplate").html();
//预编译模板
var template = Handlebars.compile(tpl);
//匹配json内容
var html = template(data);
//输入模板
$('#box').html(html);
以上述代码为例进行解释:
-
步骤一: 获取模板的内容放入到tpl中,这里
$("#myTemplate")
中填入的内容为你在上一步创建模板中所用的id
.- 提醒: 这里我使用的
jQuery
的选择器获取,当然,你可以使用原生javascript
的DOM
选择器获取,例如:docuemnt.getElementById('myTemplate')
和document.querySelector('#myTemplate')
- 提醒: 这里我使用的
-
步骤二: 使用
Handlebars.compile()
方法进行预编译,该方法传入的参数即为获取到的模板 -
步骤三: 使用
template()
方法进行编译后得到拼接好的字符串,该方法传入的参数即为上一步预编译的模板. -
步骤四: 将编译好的字符串插入到你所希望插入到的
html
文档中的位置,这里使用的是jQuery
给我们提供的html()
方法.同样,你也可以使用原生的innerHTML
案例演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.0/handlebars.js"></script>
</head>
<body>
<div id="box"></div>
</body>
<script type="text/template" id="myTemplate">
{{#each result}}
<div class="demo">
<h1>{{name}}</h1>
<p>{{content}}</p>
</div>
{{/each}}
</script>
<script>
//用jQuery获取模板
var tpl = $("#myTemplate").html();
//预编译模板
var template = Handlebars.compile(tpl);
//匹配json内容
var data = {
result: [
{
name: "wanggang",
content: "XXXXXXX"
},
{
name: "wanggang",
content: "XXXXXXX"
},
{
name: "wanggang",
content: "XXXXXXX"
}
]
}
var html = template(data);
//输入模板
$('#box').html(html);
</script>
</html>
参考文献:
https://www.jianshu.com/p/2ad73da601fc
http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine/