Handlebars js模版
参考Handlebars网站：http://handlebarsjs.com/
首先下载handlebars-1.0.0.beta.6.js和jquery-1.7.1.min.js
1）、最简单的Handlebars模版使用。
首先创建handlebarExample.html。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>handlebarExample.html</title> </head> <body>
</body> </html>
添加js库：
<head> <title>handlebarExample.html</title> <script type="text/javascript" src="javascripts/jquery/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="javascripts/handlebars/handlebars-1.0.0.beta.6.js"></script> </head>
添加handlebars模版：
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
添加读取js函数：
<script type="text/javascript">
$(document).ready(function(){
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {title: "标题", body: "内容"}
var html = template(context);
$(".mainBody").html(html);
});
</script>
执行结果如下：
<body> <div> <h1>标题</h1> <div> 内容 </div> </div> </body>
上面是一个最简单的Handlebars模版应用，其中template(context)是生成相应的html节点，并且添加到页面上。其中context可以添加相应的标签。
2)Block expressions使用方法
可以自定义模版标签，利用helper生成相应的html代码：
首先修改模版：
<script id="entry-template" type="text/x-handlebars-template">
{{#list people}}{{firstName}} {{lastName}}{{/list}}
</script>
修改context和渲染成html
<script type="text/javascript">
$(document).ready(function(){
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context =
{
people: [
{firstName: "Yehuda", lastName: "Katz"},
{firstName: "Carl", lastName: "Lerche"},
{firstName: "Alan", lastName: "Johnson"}
]
}
Handlebars.registerHelper('list', function(items, options) {
var out = "<ul>";
for(var i=0, l=items.length; i<l; i++) {
out = out + "<li>" + options.fn(items[i]) + "</li>";
}
return out + "</ul>";
});
var html = template(context);
$(".mainBody").html(html);
});
</script>
生成的代码效果如下：
- Yehuda Katz
- Carl Lerche
- Alan Johnson
添加一个名叫list的helper，funcitons(items, options)传入两个参数, data中的people作为第一个参数传入，options作为第二个参数传入，options附带属性fn，使用fn可以调用该模块的内容。
3）、With Expressions 使用方法
直接添加模版并且生成节点，添加到页面。
var source = "<p>{{lastName}}, {{firstName}}</p>";
var template = Handlebars.compile(source);
var html =template({firstName: "Alan", lastName: "Johnson"});
添加模版：
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
{{#with author}}
<h2>By {{firstName}} {{lastName}}</h2>
{{/with}}
</div>
</script>
添加模版数据内容：
<script type="text/javascript">
$(document).ready(function(){
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context =
{
title: "My first post!",
author: {
firstName: "Charles",
lastName: "Jolley"
}
}
var html = template(context);
$(".mainBody").html(html);
});
</script>
其中使用with标签可以访问数据结构中的author对象中的相应元素。在实际的编程中，这一点非常有用，因为数据的不同对象需要展示到相同的页面上。所以with标签非常有用。
4）、Each helpers 用法
可以利用each标签，循环数据。
添加模版：
<script id="entry-template" type="text/x-handlebars-template">
<ul class="people_list">
{{#each people}}
<li>{{this}}</li>
{{/each}}
</ul>
</script>
实现数据添加和展示：
<script type="text/javascript">
$(document).ready(function(){
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context =
{
people: [
"Yehuda Katz",
"Alan Johnson",
"Charles Jolley"
]
}
var html = template(context);
$(".mainBody").html(html);
});
</script>
显示的结果：
- Yehuda Katz
- Alan Johnson
- Charles Jolley
5）、if helpers 用法
使用if模块，可以实现想用的逻辑。
模版：
<div class="entry">
{{#if author}}
<h1>{{firstName}} {{lastName}}</h1>
{{else}}
<h1>Unknown Author</h1>
{{/if}}
</div>
添加数据：
<script type="text/javascript">
$(document).ready(function(){
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context ={}
var html = template(context);
$(".mainBody").html(html);
});
</script>
由于数据为空，直接显示Unknown Author。
6）、Handlebars Paths
Handlebars数据也支持相应的路径。
模版：
<div class="entry">
<h1>{{title}}</h1>
<h2>By {{author.name}}</h2>
<div class="body">
{{body}}
</div>
</div>
相应的数据：
<script type="text/javascript">
$(document).ready(function(){
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {
title: "My First Blog Post!",
author: {
id: 47,
name: "Yehuda Katz"
},
body: "My first post. Wheeeee!"
};
var html = template(context);
$(".mainBody").html(html);
});
</script>
其中<h2>By {{author.name}}</h2>可以显示author对象中的name。
7）、使用Helpers
用户自定义helpers。
模版：
<script id="entry-template" type="text/x-handlebars-template">
<div class="post">
<h1>By {{fullName author}}</h1>
<div class="body">{{body}}</div>
<h1>Comments</h1>
{{#each comments}}
<h2>By {{fullName author}}</h2>
<div class="body">{{body}}</div>
{{/each}}
</div>
</script>
数据：
<script type="text/javascript">
$(document).ready(function(){
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {
author: {firstName: "Alan", lastName: "Johnson"},
body: "I Love Handlebars",
comments: [{
author: {firstName: "Yehuda", lastName: "Katz"},
body: "Me too!"
}]
};
Handlebars.registerHelper('fullName', function(person) {
return person.firstName + " " + person.lastName;
});
var html = template(context);
$(".mainBody").html(html);
});
</script>
其中利用help实现了fullName标签。
原文地址：http://wangjun.easymorse.com/?p=1704