`
yi_17328214
  • 浏览: 204060 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

Handlebars 的使用

htmljsjavascriptjqueryweb 
阅读更多
web 开发中，js 解析JSON 是经常的事情。非常繁琐。handlebars 使用了模版，只要你定义一个模版，提供一个json对象，handlebars 就能吧json对象放到你定的模版中，非常方便好用！ 下面直接上代码： 

<!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>




$(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));;
	
}
2
顶
0
踩
分享到：
| google map 根据marker的多少设置中心点和 ...
评论
4 楼 cuiqi4016 2015-12-17  
可不可以把把html模版作为一个单独的文件引入进来，handlebars 除了compile方法可以处理字符串模版之外有没有别的方法可以直接处理hbs文件呢？
3 楼 lywangbadan 2015-08-25  
      
2 楼 lituo20 2013-08-27  
不错的，以前接触过一点，看了一下，恍然大悟，好像一下子懂了
1 楼 zhangyaochun 2012-03-31  
其实就是模板化，这是以前就开始推崇的面向数据编程的一个方式。比如jquery template
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics