Handlebars入门案例及其最常用方法

发布时间：2025-12-09 16:13:11 浏览次数：7

入门案例

handlebars 模版，只要你定义一个模版，提供一个json对象，handlebars 就能吧json对象放到你定的模版中，非常方便好用！

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Handlebars demo</title>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script type="text/javascript" src="js/handlebars-1.0.0.beta.6.js"></script>

<script type="text/javascript" src="js/mytest.js"></script>

<style type="text/css"></style>

</head>

<body>

<h2>Simple handlebars demo</h2>

<button id="btn_simple">Click me</button>

<p id="my_p">

</p>

<h2>Handlebars Helpers demo</h2>

<button id="btn_helper">Click me</button>

<p id="helper_p">

</p>

<script id="some-template" type="text/x-handlebars-template">

<table>

<thead>

<th>Username</th>

<th>Real Name</th>

<th>Email</th>

</thead>

<tbody>

{{#if users}}

<tr>

<td>{{username}}</td>

<td>{{firstName}} {{lastName}}</td>

<td>{{email}}</td>

</tr>

{{else}}

<tr>

<td colspan="3">NO users!</td>

</tr>

{{/if}}

</tbody>

</table>

</script>

<script id="helper-template" type="text/x-handlebars-template">

<p>

<h1>By {{fullName author}}</h1>

<p>{{body}}</p>

<h1>Comments</h1>

{{#each comments}}

<h2>By {{fullName author}}</h2>

<p>{{body}}</h2>

{{/each}}

</p>

</script>

</body>

</html>

mytest.js

$(document).ready(function(){

Handlebars.registerHelper('fullName', function(person) {

return person.firstName + " " + person.lastName;

});

$("#btn_simple").click(function(){

// $(this).hide();

showTemplate();

});

$("#btn_helper").click(function(){

showHowUseHelper();

});

// var context = {title: "My New Post", body: "This is my first post!"};

var persion = {title :"My New Post",body:"This is my first post!"}

function showTemplate(){

var source = $("#some-template").html();

var template = Handlebars.compile(source);

var data = { users: [

{username: "alan", firstName: "Alan", lastName: "Johnson", email: "alan@test.com" },

{username: "allison", firstName: "Allison", lastName: "House", email: "allison@test.com" },

{username: "ryan", firstName: "Ryan", lastName: "Carson", email: "ryan@test.com" }

]};

$("#my_p").html(template(data));;

}

function showHowUseHelper(){

var context = {

author: {firstName: "Alan", lastName: "Johnson"},

body: "I Love Handlebars",

comments: [{

author: {firstName: "Yehuda", lastName: "Katz"},

body: "Me too!"

}]

};

var source = $("#helper-template").html();

var template = Handlebars.compile(source);

$("#helper_p").html(template(context));;

}

常用方法

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"><p class="entry"><h1>{{title}}</h1><p class="body">{{body}}</p></p></script>

添加读取js函数：

执行结果如下：

<body><p><h1>标题</h1><p>内容</p></p></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

生成的代码效果如下：

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"><p class="entry"><h1>{{title}}</h1>{{#with author}}<h2>By {{firstName}} {{lastName}}</h2>{{/with}}</p></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>

实现数据添加和展示：

显示的结果：

Yehuda Katz
Alan Johnson
Charles Jolley

5）、if helpers 用法

使用if模块，可以实现想用的逻辑。

模版：

<p class="entry">{{#if author}}<h1>{{firstName}} {{lastName}}</h1>{{else}}<h1>Unknown Author</h1>{{/if}}</p>

添加数据：

由于数据为空，直接显示Unknown Author。

6）、Handlebars Paths

Handlebars数据也支持相应的路径。

模版：

<p class="entry"><h1>{{title}}</h1><h2>By {{author.name}}</h2><p class="body">{{body}}</p></p>

相应的数据：

其中<h2>By {{author.name}}</h2>可以显示author对象中的name。

7）、使用Helpers

用户自定义helpers。

模版：

数据：

其中利用help实现了fullName标签。

上一篇：15个未来高科技产品会让你无法想象！这些开脑洞的设计太牛了！下一篇：WiFi（Wireless Fidelity）基础（六）

知识问答

Handlebars入门案例及其最常用方法

综合百科

网站导航