- Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板加载和运行的速度。
- 简单的说就是：Handlebars是一个很好的前后端的分离的方案
引入：
代码写在body下的script标签里面，并且id="template",type的类型为type="text/x-handlebars-template"
记得还要去js中去配置一些东东：
算了吧，来一篇直接粘贴过去就能拿来用的，以后一号拿来复习再巩固
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>handlebars</title>
<style>
.big {
100px;
height: 100px;
border: 1px solid green;
border-radius: 100px;
position: relative;
}
.small {
50px;
height: 50px;
border: 1px solid green;
border-radius: 50px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
text-align: center;
line-height: 50px;
}
</style>
</head>
<body>
<div id="container"></div>
<script id="template" type="text/x-handlebars-template">
<h1>Hello</h1>
<h2>Handlebars</h2>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{gender}}</td>
</tr>
</tbody>
</table>
<p>hello, {{name}}</p>
<p>{{hello}}</p>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
{{#each listOfStudents}}
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{gender}}</td>
</tr>
{{/each}}
</tbody>
</table>
<p>hello, {{{person.a.name}}}</p>
<p>hello, {{person/a/name}}</p>
<div class="big">
<div class="small">
2
</div>
</div>
<div class="big">
<div class="small">
3
</div>
</div>
<div class="big">
<div class="small">
4
</div>
</div>
<!-- {{circle name}}
{{circle name}}
{{circle name}} -->
</script>
<script src="./handlebars-v4.0.5.js"></script>
<script>
// 获取模板的源代码
var source = document.getElementById('template').innerHTML;
// 把模板的源代码，编译成模板对象
var template = Handlebars.compile(source);
// 创建helper
Handlebars.registerHelper('circle', function(data ) {
// 告诉系统，这个返回值要解析成真正的标签
var obj = new Handlebars.SafeString('<div class="big"><div class="small">' + data + '</div></div>');
return obj;
});
// 通过模板对象，获取最终html代码
var html = template({
person: {
a: {
name: 'Tom<input type="text">'
},
b: 'hello'
},
name: 'Bob',
age: 20,
listOfStudents: [
{
name: 'bob',
age: 20,
gender: 'male'
},
{
name: 'tom',
age: 22,
gender: 'male'
}]
});
// console.log(html);
// 把html代码插入到网页中去
document.getElementById('container').innerHTML = html;
// helper
</script>
</body>
</html>