正文

JS模板引擎handlebars.js的简单使用

IP云
IP云V管理员/2 阅读
11/29
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

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 >

执行效果：

来源：http://www.yl-blog.com/index.php/js/85.html

相关阅读

目录[+]