Handlebars js模版

来源：互联网发布：ubuntu内核源码目录编辑：程序博客网时间：2024/06/07 19:13

参考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