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

Handlebars 的使用

阅读更多
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
分享到:
评论
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-delimiters

    Handlebars 是一个流行的轻量级模板引擎,常用于前端开发,尤其在构建动态用户...如果你在前端项目中使用Handlebars,并且需要处理与默认定界符冲突的情况,那么`handlebars-delimiters` 是一个值得考虑的解决方案。

    Handlebars.java逻辑简单支持语义扩展的Java模板引擎

    例如,使用 Handlebars,你可以定义助手方法(helper methods)来处理复杂的逻辑,如条件判断、循环等,使得模板代码更易于理解。 2. **模板语法**:Handlebars 使用双大括号 `{{ }}` 来包围变量和表达式。例如,`{...

    handlebars_assets-master

    1. **Handlebars 模板语法**:Handlebars 使用双大括号 `{{ }}` 来包裹变量和表达式,支持条件语句(如 `{{#if}}` 和 `{{else}}`)、循环(如 `{{#each}}`)、助手函数调用等。理解这些基本语法是使用 Handlebars 的...

    handlebars入门教程

    本教程将引导您了解 Handlebars 的基本概念和语法,从安装 Handlebars 到使用它的高级功能。 介绍 Handlebars 是一个基于 JavaScript 的模板引擎,它可以将数据渲染到 HTML 模板中。它提供了一种简单易用的方式来...

    Laravel开发-handlebars-l4

    标题"**Laravel开发-handlebars-l4**"指的是在Laravel 4中使用Handlebars作为视图引擎的开发实践。Laravel 4默认使用Blade模板引擎,但开发者可以根据项目需求选择其他模板引擎,如Handlebars。Handlebars的设计理念...

    handlebars官方例子及源代码

    在本文中,我们将深入探讨Handlebars的核心概念、语法特性以及如何使用官方提供的例子和源代码来提升开发效率。 一、Handlebars概述 Handlebars设计的目标是提供一种易于理解和使用的模板语言,同时保持与HTML的...

    js模版引擎handlebars.js实用教程demo

    本教程将深入探讨Handlebars的基础知识、核心特性以及如何在实际项目中应用。 一、Handlebars简介 Handlebars是一种声明式模板语言,它的设计目标是提供一种简单、非侵入性的方法来绑定数据到HTML。它通过占位符...

    前端开源库-handlebars-helper-repeat

    在传统的Handlebars语法中,虽然可以使用内置的#each助手来遍历数组或对象,但如果你需要一个简单的数字迭代(例如,重复某段文字5次),handlebars-helper-repeat就派上用场了。 使用handlebars-helper-repeat,你...

    gulp-handlebars:gulp的车把插件

    gulp-把手 gulp的车把插件 用法 安装gulp-handlebars作为开发依赖项: ...这就是在gulp-handlebars使用把手的版本的方法: handlebars ( { handlebars : require ( 'handlebars' ) } ) 运行时位于:

    Javascript模版引擎Handlebars.js源文件与示例

    Handlebars.js的设计理念是易于学习,易于使用,并且支持编译时和运行时两种模式。 在Handlebars.js中,模板被定义为HTML片段,其中包含了占位符,这些占位符在运行时会被实际的数据替换。Handlebars提供了多种控制...

    Java模板引擎Handlebars.java.zip

    Handlebars.java 是一个不包含逻辑的,语义的 Java 模板引擎。 Maven:    &lt;groupId&gt;com.github.jknack&lt;/groupId&gt;  &lt;artifactId&gt;handlebars  ${handlebars-version}   示例代码: Handlebars handlebars = ...

    handlebars模板引擎php版 让你的模板前后台都能用

    5. **使用Handlebars的优势**: - **简洁性**: Handlebars语法简单,易于学习和使用。 - **独立性**: 模板独立于业务逻辑,易于维护。 - **可复用性**: 通过部分和助手,模板可以被多次复用。 - **前后端兼容**:...

    前端开源库-yeoman-handlebars-engine

    通过使用Handlebars作为其模板引擎,开发者能够编写结构化、易于理解和维护的模板代码。 Handlebars的语法简洁且直观,支持助手(helpers)和部分(partials),使得模板更加模块化。助手是可以扩展的功能,用于...

    前端开源库-promised-handlebars

    **前端开源库-promised-handlebars** 是一个专为前端开发者设计的开源库,它扩展了经典的 Handlebars...如果你的项目中使用了 Handlebars,并且需要处理异步数据,那么 promised-handlebars 将是一个非常有价值的工具。

    handlebars-ex:像把手一样简单的解析器

    车把 简单的类似把手的解析器。 实际上,这只是一个语法,它自动生成一个解析器以识别类似的... 这里使用的语法与Handlebars使用的语法不同。 使用车把,您可以生成任何模板; C#,JavaScript,HTML或简单的纯文本。

    handlebars-examples:handlebars.js库的样本使用

    这个"handlebars-examples"项目提供了多种 Handlebars.js 的使用示例,帮助开发者更好地理解和应用该库。以下是对这些示例的详细解释: 1. **模板语法**:Handlebars 使用易于理解的 Mustache 风格语法,如 `{{...

    JavaScript页面模板库handlebars的简单用法

    在使用Handlebars之前,首先需要将它引入到我们的HTML页面中,就像在提供的内容中展示的那样,通过`&lt;script&gt;`标签引入jQuery以及Handlebars的JS库文件。这样做是为了确保我们的HTML文档中可以使用Handlebars的API。 ...

    handlebars.js v4.0.5

    handlebars.js

    handlebars.js v4.0.5 所需文件

    在提供的压缩包中,"handlebars.js v4.0.5 所需文件.pdf"可能是Handlebars的官方文档或者使用手册,包含了详细的API参考、教程和示例,可以帮助开发者更好地理解和使用这个库。阅读这份文档将有助于深入理解...

    handlebars-v3.0.0.js

    handlebars-v3.0.0.js

Global site tag (gtag.js) - Google Analytics