handlebars模板引擎入门开发

什么是模板引擎

模板引擎（这里特指用于Web开发的模板引擎）是为了使用户界面与业务数据（内容）分离而产生的，它可以生成特定格式的文档，用于网站的模板引擎就会生成一个标准的HTML文档。

Web前端模板引擎

也就是说，在我们前端界面可以通过JavaScript代码库，来生成HTML代码片段了，哇，好厉害的样子。
其中一个应用比较多的一个handlebars模板引擎，比较成功的应用案例是国外的视频教育平台Udemy，而且在使用Node.js开发时候同样可以使用handlebars作为后端的模板引擎，实在是太实用了。

Web前端为什么要使用模板引擎

由于Ajax技术的成为目前Web开发的主流技术。为了满足系统的扩展性与多表现力节约成本，开始兴起了一种后台接口风格Restful。这种风格传递数据通常以JSON格式，因此避免不了的就是，当数组数据传递过来的时候我们需要显示到表格界面，要做字符串拼接。而这样会造成一个问题，就是可维护性差。为了解决这一问题我们可以使用模板引擎来处理生成HTML代码片段而不是拼接字符串。

Handlebars模板引擎相关资源

官方网站：http://handlebarsjs.com/
github地址：https://github.com/wycats/handlebars.js

简单的Handlebars使用案例

<!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>

案例执行效果

handlebars模板引擎案例

来源：雨林博客（www.yl-blog.com）

分享: 淘江湖新浪 QQ微博 QQ空间开心人人豆瓣网易微博百度鲜果白社会飞信