handlebars.js的使用
首先我们要明白handlebars.js是干什么用的，我们知道使用jsp很麻烦，
于是我们开始使用freemarker等模板引擎，但这个只是针对服务器端来解
析的，那么有没有一种模板引擎可以在前端实现呢，
这个当然有，就是我们现在要了解的handlebars。
在什么情况下使用handlebars
答： 针对前端开发，比如做ajax的时候，原来我们使用JQuery的load方法加载页面，
现在我们只需要有json数据过来就行了，这样减少了服务端的鸭梨，哈哈。
或者是你在做一些界面上的应用，总之将计算交到客户端这是非常可取的方式。
github地址：https://github.com/wycats/handlebars.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<script
src="handlebars.js"></script>
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<title>handlebars.js 模板引擎学习 by 雨林博客</title>
</head>
<body>
<div
id="content">
摸板引擎测试 by 雨林博客</div>
<br/>
标题: <input
id="title"
/><br/>
内容: <input
id="body"
/><br/>
<button
onclick="show();">显示模板内容</button>
<!-- 模板数据 --><script
id="content-template"
type="text/x-handlebars-template">
<div>
<h1>{{title}}</h1>
<div>
{{body}}
</div>
</div>
</script>
<script
type="text/javascript">
function show(){ var source = $("#content-template").html();//获取模板内容
var template = Handlebars.compile(source);//返回模板编译对象，接下来可以传递参数
//编写模板中要绑定的json数据，属性对应着模板中的变量
var context = {title: $("#title").val(), body: $("#body").val()};
var html = template(context);
$("#content").html(html);
}</script>
</body>
</html>
|
执行效果：