Handlebars js模版 - 布颜书

web 开发中，js 解析JSON 是经常的事情。非常繁琐。handlebars 使用了模版，只要你定义一个模版，提供一个json对象，handlebars 就能吧json对象放到你定的模版中，非常方便好用！

目前已经接入这个JS模版的典型项目有：腾讯阅读门户 read.qq.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标签。

posted on 2014-11-05 12:13 布颜书阅读(428) 评论(0) 收藏举报

刷新页面返回顶部