handlebars 的使用案例

最新推荐文章于 2022-05-01 03:30:00 发布

一个java一棵草

最新推荐文章于 2022-05-01 03:30:00 发布

阅读量252

点赞数

分类专栏： js 文章标签： json JavaScript ViewUI

本文链接：https://blog.csdn.net/u013731146/article/details/84597113

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

web 开发中，js 解析JSON 是经常的事情。非常繁琐。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/myjs.js"></script>
<style type="text/css"></style>
</head>
<body>
<h2>Simple handlebars demo</h2>
<button id="btn_simple">Click me</button>
<div id="my_div">

</div>
<h2>Handlebars Helpers demo</h2>
<button id="btn_helper">Click me</button>
<div id="helper_div">

</div>
<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">
<div>
<h1>By {{fullName author}}</h1>
<div>{{body}}</div>

<h1>Comments</h1>

{{#each comments}}
<h2>By {{fullName author}}</h2>
<div>{{body}}</h2>
{{/each}}
</div>
</script>
</body>
</html>

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_div").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_div").html(template(context));;

}