Handlebars 的使用

yi_17328214

浏览: 207502 次
性别:
来自: 大连

最近访客更多访客>>

u010850154

zzy_001

moyan254

nightwish12075

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java
html+css+div
javascript
插件
Ajax

html js javascript jquery web

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
踩

分享到：

Mac 系统下自定义快捷键 | google map 根据marker的多少设置中心点和 ...

2012-03-31 01:12
浏览 33709
评论(4)
分类:Web前端
查看更多

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

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Handlebars 的使用

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

Handlebars 的使用

评论

发表评论

相关推荐

Spark 连接 MongoDB

ListView 中嵌套GridView listview item 不能点击问题

android 手机传感器

android regex utils

Proguard on MacOSX

仿iphone actionsheet

android 自定义progressbar style

android ADT 17 can not find aapt when build with maven

android 代码proguard

Struts 标签实现时间下来选择

MapMarkerExample

Web browser hacks, Css hacks - ie, firefox, chrome, safri, Opera

使用CSS实现间隔线|(竖线)

google map 根据marker的多少设置中心点和缩放比例

android 程序 发布加密

JS来实现浏览器菜单的命令<转>

Java 文本文件和二进制文件的读取(转)

ymPrompt消息提示组件 2.0,4.0

IE和firefox通用的复制到剪贴板的JS函数

java(Web)中相对路径，绝对路径问题总结

最近访客更多访客>>

android 程序发布加密