js模版引擎handlebars

合集下载

10款最佳的JavaScript 模板引擎

10款最佳的JavaScript 模板引擎随着Web 开发者和设计者收藏JavaScript 库的数量越来越多，JavaScript 也有大量流行的库等等，很多时候jQuery，MooTools大家都会使用JavaScript 模板引擎来开发JavaScript 应用。

以下列表介绍的就是JavaScript 模板引擎。

这里我们收集了一些非常有用的JavaScript 模板引擎，希望能给Web 开发者和设计者提供一定的帮助，在评论与大家交流一下JavaScript 模板引擎的相关心得吧：）是超高性能的jadeJavaScript 模板引擎，有着非常强大的API 和大量杰出的特性。

它主要针对node 的服务端。

Mustache 是logic-less 模板语法，可以使用在HTML，配置文件，源代码等等地方。

它是使用哈希表或者对象提供的值来扩展模板标签。

是一个强大的客Transparency户端网站模板引擎，可直接绑定数据到DOM，包括一些很棒的特性如HTML 模板、JS 视图逻辑。

IE9+, Chrome, Firefox, iOS, Android, Etc.Underscore 是JavaScript 库，提供大量有用的函数式程序设计助手，不需要扩展任意的内置对象。

EJS 会使用客户端模板从JavaScript 中清理HTML 代码，整理好这些代码之后，JavaScript 代码就会变得更加整洁和有条理。

doT.js 是最快和简洁的JavaScript 模板函数搜索，这些函数致力于V8 和Node.js 下高性能的表现。

doT.js 在浏览器和Node.js 下都表现出超高的性能。

Handlebars 给构建语义模板提供强大的基础支持。

T.js 是使用简单JavaScript 数据结构来展示html/xml 数据的模板引擎。

Dust 是浏览器和Node.js 异步的模板。

Nunjucks 是更复杂的JavaScript 模板引擎，有着非常丰富强大的语言块继承，autoescaping，宏和异步控制等功能。

Handlebars模板引擎介绍和开发指南

Handlebars模板引擎介绍和开发指南本文翻译和整理自Handlebars Github和官网，当前handlebar版本1.3.0。

介绍Handlebars是一个Javascript模板引擎，能让你轻松高效的编写语义化模板，它是Mustache模板引擎的一个扩展，Handlebars和Mustache都是弱逻辑的模板引擎，能将Web 前端的视图和代码分离，降低两者之间耦合。

Handlebars的特点是一切都是表达式，没有data api，不污染HTML标签，和DeDecms、wordpress模板类似，因此能很方便的与其他前端JS库混用，并且编写简单，易于扩展。

Handlebars支持的浏览器及运行环境有：IE6+、Chrome、Firefox、Safari5+、Opera11+以及Node.js。

Handlebars是ember.js的默认模板引擎，同时也是nodejs web框架Clouda、Meteor的默认模板引擎。

安装Handlebars的安装很简单，你可以从Github和官网下载最新版本，也可以从bower包管理器中将它添加到你的页面上。

用法简单来说，Handlebars里的语法是Mustache的超集，如果你想了解基础的语法，可以查看Mustache的帮助页面，下面也将讲解Handlebars中的语法。

基础语法Handlebars模板看起来和一般的HTML没什么两样，只不过是在HTML中嵌入了Handlebars的表达式。

如下：<div class="entry"> <h1>{{title}}</h1> <div class="body"> {{body}}</div> </div>一个Handlebars的表达式是被{{和}}包含起来的内容。

Javascript模板引擎handlebars使用实例及技巧

Javascript模板引擎handlebars使⽤实例及技巧我们在开发的时候针对DOM操作，⽤简单的JS应⽤来说不成问题，但如果你对视图的每次更新都需要对我⽂档中⾮常⼤量的块进⾏操作呢？这时JS模版就派上⽤场了。

这是⼀个实例，我们可以把json的数据，按照⾃⼰的想法嵌⼊到模板⾥⾯。

<!DOCTYPE html><html><head><title>Handlebars Expressions Example</title></head><body><h1>Handlebars Expressions Example!</h1><div id="list"></div><script type="text/javascript" src=\'#\'" /jquery.js"></script><script type="text/javascript" src=\'#\'" /handlebars-1.0.0.beta.6.js"></script><script id="people-template" type="text/x-handlebars-template">{{#people}}<div class="person"><h2>{{first_name}} {{last_name}}</h2><div class="phone">{{phone}}</div><div class="email"><a href="mailto:{{email}}">{{email}}</a></div><div class="since">User since {{member_since}}</div></div>{{/people}}</script><script type="text/javascript">$(document).ready(function() {// compile our templatevar template = pile($("#people-template").html());var data = {people: [{ first_name: "rui", last_name: "fengyun", phone: "1234567890", email: "alan@", member_since: "Mar 25, 2011" },{ first_name: "Allison", last_name: "House", phone: "0987654321", email: "allison@", member_since: "Jan 13, 2011" },{ first_name: "Nick", last_name: "Pettit", phone: "9836592272", email: "nick@", member_since: "Apr 9, 2009" },{ first_name: "Jim", last_name: "Hoskins", phone: "7284927150", email: "jim@", member_since: "May 21, 2010" },{ first_name: "Ryan", last_name: "Carson", phone: "8263729224", email: "ryan@", member_since: "Nov 1, 2008" }]};$('#list').html(template(data));});</script></body></html>View Code看到这个例⼦，⼤家感觉很爽吧~ 就是这样。

js模版引擎handlebars.js实用教程——if-判断的基本用法

js模版引擎handlebars.js实⽤教程——if-判断的基本⽤法1<!DOCTYPE html>2<html>3<head>4<META http-equiv=Content-Type content="text/html; charset=utf-8">5<title>if-判断的基本⽤法 - by 杨元</title>6</head>7<body>8<h1>if-判断的基本⽤法</h1>910<table>11<thead>12<tr>13<th>姓名</th>14<th>性别</th>15<th>年龄</th>16</tr>17</thead>18<tbody id="tableList">1920</tbody>21</table>222324<script type="text/javascript" src="script/jquery.js"></script>25<script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>2627282930<script id="table-template" type="text/x-handlebars-template">31 {{#each student}}32 {{#if name}}33<tr>34<td>{{name}}</td>35<td>{{sex}}</td>36<td>{{age}}</td>37</tr>38 {{/if}}39 {{/each}}40</script>414243<script type="text/javascript">44 $(document).ready(function() {45//模拟的json对象46var data = {47"student": [48 {49"name": "张三",50"sex": "0",51"age": 1852 },53 {54"sex": "0",55"age": 2256 },57 {58"name": "妞妞",59"sex": "1",60"age": 1861 }62 ]63 };6465//注册⼀个Handlebars模版，通过id找到某⼀个模版，获取模版的html框架66//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。

Handlebars模板引擎介绍和开发指南

Handlebars模板引擎介绍和开发指南本文翻译和整理自Handlebars Github和官网，当前handlebar 版本1.3.0。

介绍Handlebars是一个Javascript模板引擎，能让你轻松高效的编写语义化模板，它是Mustache模板引擎的一个扩展，Handlebars和Mustache都是弱逻辑的模板引擎，能将Web前端的视图和代码分离，降低两者之间耦合。

Handlebars支持的浏览器及运行环境有：IE6+、Chrome、Firefox、Safari5+、Opera11+以及Node.js。

Handlebars是ember.js的默认模板引擎，同时也是nodejs web 框架Clouda、Meteor的默认模板引擎。

安装Handlebars的安装很简单，你可以从 Github和官网下载最新版本，也可以从bower包管理器中将它添加到你的页面上。

用法简单来说，Handlebars里的语法是Mustache的超集，如果你想了解基础的语法，可以查看Mustache的帮助页面，下面也将讲解Handlebars中的语法。

基础语法Handlebars模板看起来和一般的HTML没什么两样，只不过是在HTML中嵌入了Handlebars的表达式。

如下：1.<div class="entry">2.<h1>{{title}}</h1>3.<div class="body">4.{{body}}5.</div>6.</div>一个Handlebars的表达式是被{{和}}包含起来的内容。

了解更多Handlebars表达式。

Handlebars的应用与实现

Handlebars的应用与实现Handlebars是一个轻量级的JavaScript模板引擎，可以方便地将数据与模板进行结合，生成HTML文档。

它采用了类似Mustache的语法，支持条件语句、循环语句、变量输出等功能。

Handlebars的本质是将模板编译为JavaScript函数，并将数据作为函数的参数进行调用。

在本论文中，我们将围绕着Handlebars的应用与实现展开，从以下几个方面进行介绍。

一、Handlebars的应用场景由于Handlebars的模板语法简单易懂，易于编写和维护，因此被广泛应用于前端开发中。

下面我们将列举Handlebars的几个典型的应用场景。

1.页面渲染Handlebars可以通过指定数据对象来解析包含特殊格式的HTML模板字符串。

通过将数据与模板相结合，生成最终HTML文档。

我们可以在前端开发中使用Handlebars来动态生成页面。

尤其是在构建单页应用程序时，使用Handlebars可以更轻松地实现模块化渲染和维护页面。

2.邮件模板Handlebars可以用来渲染邮件模板。

在开发一些需要发送邮件的应用时，我们可以使用Handlebars来渲染邮件模板。

通过模板引擎的模板特性，我们可以动态生成邮件内容，为用户提供更好的邮件体验。

3.静态站点Handlebars可以被用来帮助构建静态站点。

静态站点通常由HTML、CSS和JavaScript组成，为了更好地重用页面代码，我们可以把重复的代码封装到公共的模板中，并通过Handlebars生成相应的HTML文档。

二、Handlebars的使用1.基本语法Handlebars采用的语法类似于Mustache，最基本的语法是使用两个大括号包裹变量名称。

如下示例：```<div>{{title}}</div>2.代码注释Handlebars也提供了注释标记，用于开发者为模板添加注释。

注释标记使用“{{!}}”格式，如下所示：```{{! this is a comment }}```3.条件语句Handlebars提供了if语句和unless语句用于条件判断。

handlebars基本用法

handlebars基本用法Handlebars是一个模板引擎，其设计初衷是用来消除前端代码（html）和后端代码（js）之间的不必要耦合，它可以在Web应用程序中来自服务器端的数据与客户端的HTML 模板进行绑定，展示出合适的用户界面。

使用它可以让你的代码更容易阅读、维护和可伸缩，它是一个JavaScript的模板库。

Handlebars的最突出优势在于，它符合语义化规范，使用起来更容易理解，更易上手。

它有着丰富的标签，可以实现简单却强大的语法，比如：if else条件判断，each遍历，with和lookup函数等，这使得我们可以在数据可视化方案中，快速的将后台的数据结构和业务逻辑展示出来。

和其它的模板引擎一样，Handlebars使用标签和JavaScript对象来表达程序流程控制，例如if else条件判断，each遍历，with和lookup函数等等。

可以从handlebars.js 文档中获得更多的介绍，以及处理方法。

如果要使用Handlebar，你需要初始化一个 Handlebars 对象，你可以传入一个标签对象或者是模板ID。

模板ID可以通过给定模板HTML中的ID获取，标签对象是用于在显示之前要加载的query对象，它可以针对服务器传回的数据进行改造。

接着，你需要调用 Handlebars 的参数的两个方法：registerHelper 和 compiless，registerHelper用于建立可以重复使用的模板，这在复杂的项目中时有用的；compille方法是将模板和数据结合在一起，并且将字符串转换成可以被javascript加载的对象，也称模板函数，是最终渲染过程的前提。

最后，你可以直接调用Handlebars模板上所渲染的函数，来实现动态数据和静态模板之间的交互，它会根据传进来的原始数据来实现页面效果。

总的来说，Handlebars的使用具有基本的规则和步骤，你可以一步一步的掌握并且使用它，对前端页面的数据可视化应用和化简Web前端代码具有很大的好处。

JavaScript中的模板引擎

JavaScript中的模板引擎模板引擎是一种用于生成动态HTML页面的工具，它允许开发人员通过使用模板语法将数据绑定到HTML模板中，从而实现页面内容的动态渲染。

在JavaScript中，有多种模板引擎可供选择，如Mustache、Handlebars和EJS等。

本文将重点介绍JavaScript中常用的几种模板引擎及其使用方法。

一、Mustache模板引擎1. 引入Mustache库要使用Mustache模板引擎，首先需要在HTML页面中引入Mustache库。

可以通过CDN方式引入，也可以下载Mustache库，并在HTML页面中引入相应的脚本文件。

2. 编写Mustache模板Mustache模板使用双大括号({{}})来表示数据绑定的位置。

例如，我们可以将一个名为name的变量绑定到模板中：```html<script id="template" type="text/template"><h1>Hello, {{name}}!</h1></script>```或者使用存储在对象中的数据来进行绑定：```html<script id="template" type="text/template"><h1>Hello, {{}}!</h1><p>Email: {{user.email}}</p></script>```3. 渲染Mustache模板在JavaScript中，可以使用Mustache.render()方法将数据和模板进行渲染，并将渲染结果插入到HTML页面中的指定位置，例如下面的示例代码：```javascriptvar template = document.getElementById('template').innerHTML;var data = {name: 'John Doe',user: {name: 'Jane Smith',email:'****************'}};var rendered = Mustache.render(template, data);document.getElementById('output').innerHTML = rendered;```二、Handlebars模板引擎1. 引入Handlebars库与Mustache类似，使用Handlebars模板引擎也需要先引入Handlebars库。

Handlebars的使用方法文档整理（Handlebars.js）

Handlebars的使⽤⽅法⽂档整理（Handlebars.js）Handlebars是⼀款很⾼效的模版引擎,提供语意化的模版语句,最⼤的兼容Mustache模版引擎, 提供最⼤的Mustache模版引擎兼容, ⽆需学习新语法即可使⽤;Handlebars.js和Mustache 的⽬前版本为 2.0.0, ⽆压缩的情况下⽬测是 3000⾏源代码,约 200kb;下⾯这个是基本的模版表达式,其中 {{ 和 }} 之间为handlerbars的变量;<div class="entry"><h1>{{title}}</h1><div class="body">{{body}}</div></div>把数据放到⾃⼰定义的 <script> 标签中;<script id="entry-template"type="text/x-handlebars-template">template content</script>编译模版使⽤ pile 进⾏编译模版;var source =$("#entry-template").html();var template = pile(source);智能编译模版(在移动端也能运⾏哦么么哒)⽣成html代码通过上⾯的模版和数据混合编译后的结果:var context = {title: "标题", body: "我是字符串!"}var html = template(context);JS⽣成的结果如下:<div class="entry"><h1>标题</h1><div class="body">我是字符串!</div></div>//代码如下<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>test</title></head></head><body><script src="/jquery/1.9.0/jquery.js"></script><script src="/libs/handlebars.js/2.0.0/handlebars.js"></script> <div id="div1"></div><script id="entry-template" type="text/x-handlebars-template"><div class="entry"><h1>{{title}}</h1><div class="body">{{body}}</div></div></script><script>//JS代码var source = $("#entry-template").html();var template = pile(source);var context = {title: "标题", body: "我是字符串!"}var html = template(context);document.getElementById("div1").innerHTML = html;</script></body></html>//模版的代码和JS的代码如防⽌HTML被转义的⽅法;{{ }}和 {{{}}}和区别就是, 如果你不希望变量⾥⾯的字符串被转义就使⽤{{{ }}}对变量进⾏处理; <div class="entry"><h1>{{title}}</h1><div class="body">{{{body}}}</div></div>数据如下：{title: "All about <p> Tags",body: "<p>This is a post about <p> tags</p>"}定义的Helper如下渲染以后的结果如下：<div class="entry"><h1>All About <p> Tags</h1><div class="body"><p>This is a post about <p> tags</p><p>This is a post about <p> tags</p></div></div>//代码如下:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>test</title></head><body><script src="/jquery/1.9.0/jquery.js"></script><script src="/libs/handlebars.js/2.0.0/handlebars.js"></script><div id="div2"></div><script id="entry-template1" type="text/x-handlebars-template"><div class="entry"><h1>{{title}}</h1><div class="body">{{{body}}}</div></div></script><script>Handlebars.registerHelper('link', function(text, url) {text = Handlebars.Utils.escapeExpression(text);url = Handlebars.Utils.escapeExpression(url);var result = '<a href="' + url + '">' + text + '</a>';return new Handlebars.SafeString(result);});var source = $("#entry-template1").html();var template = pile(source);var context = {title: "All about <p> Tags",body: "<p>This is a post about <p> tags</p>"};var html = template(context);document.getElementById("div2").innerHTML = html;</script></body></html>Handlerbars的⾃定义表达式块表达式允许你定义 helpers ⽣成⾃定义的HTML,下⾯这个是JS的模版;{{#list people}}{{firstName}} {{lastName}}{{/list}}如果你使⽤下⾯的数据:{people: [{firstName: "Yehuda", lastName: "Katz"},{firstName: "Carl", lastName: "Lerche"},{firstName: "Alan", lastName: "Johnson"}]}在JS⾥⾯定义这个helper;Handlebars.registerHelper('list', function(items, options) {var out ="<ul>";for(var i=0, l=items.length; i<l; i++) {out = out +"<li>"+ options.fn(items[i]) +"</li> " ; /*options.fn相当于⼀个编译的函数*/}return out +"</ul>";});执⾏以后的结果是:<ul><li>Yehuda Katz</li><li>Carl Lerche</li><li>Alan Johnson</li></ul>⾃定义块表达式还有很多别的特性, ⽐如可以直接使⽤ IF 和 ELSE；//代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>test</title></head><body><script src="/jquery/1.9.0/jquery.js"></script><script src="/libs/handlebars.js/2.0.0/handlebars.js"></script><div id="div3"></div><script id="entry-template2" type="text/x-handlebars-template">{{! 这个是模版的注释 }}{{#list people}}{{firstName}} {{lastName}}{{/list}}</script><script>Handlebars.registerHelper('list', function(items, options) {var out = "<ul>";for(var i=0, l=items.length; i<l; i++) {out = out + "<li>" + options.fn(items[i]) + "</li> " ; /*options.fn相当于⼀个编译的函数*/}return out + "</ul>";});var source = $("#entry-template2").html();var template = pile(source);var context = {people: [{firstName: "Yehuda", lastName: "Katz"},{firstName: "Carl", lastName: "Lerche"},{firstName: "Alan", lastName: "Johnson"}]};var html = template(context);document.getElementById("div3").innerHTML = html;</script></script></body></html>Handlebars次级数据的渲染Handlebars⽀持简单的下级对象获取和上级对象获取, 跟 Mustache⼀样样的.<p>{{name}}</p>Handlebars 也⽀持多层次的数据展⽰, 模版如下.<div class="entry"><h1>{{title}}</h1><h2>By {{}}</h2><div class="body">{{body}}</div></div>下⾯这个是要使⽤到的Handlebars的数据;var context = {title: "My First Blog Post!",author: {id: 47,name: "Yehuda Katz"},body: "My first post. Wheeeee!"};代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>test</title></head><body><script src="/jquery/1.9.0/jquery.js"></script><script src="/libs/handlebars.js/2.0.0/handlebars.js"></script><div id="div4"></div><script id="entry-template3" type="text/x-handlebars-template"><div class="entry"><h1>{{title}}</h1><h2>By {{}}</h2><div class="body">{{body}}</div></div></script><script>var source = $("#entry-template3").html();var template = pile(source);var template = pile(source);var context = {title: "My First Blog Post!",author: {id: 47,name: "Yehuda Katz"},body: "My first post. Wheeeee!"};var html = template(context);document.getElementById("div4").innerHTML = html;</script></body></html>Handlebars 可以迭代Object对象(纯对象或者数组); 在模版中的../是对象的⽗级;<h1>Comments</h1><div id="comments">{{#each comments}}<h2><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h2><div>{{body}}</div>{{/each}}</div>下⾯展⽰的name都是同样的东西;<p>{{./name}} or {{this/name}} or {{}}</p>Handlebars模版中的注释可以使⽤ {{!-- --}} 或者 {{! }}或者 .可以把模版专⽤的注释写在模版⽂件⾥⾯么么哒. 提⾼代码的可读性, 这个也算是最佳实践吧;<div class="entry">{{!-- only output this author names if an author exists --}}{{#if author}}<h1>{{firstName}} {{lastName}}</h1>{{/if}}</div>{{!-- --}}和{{! }}的注释不会出现在⽣成的代码中; 如果使⽤  注释的代码会出现在⽣成的代码中;<div class="entry">{{! This comment will not be in the output }}</div>⾃定义标签(Helpers)Handlebars的⾃定义标签可以使⽤在Handlebars模版的任何地⽅,必须使⽤ Handlebars.registerHelper注册到即可; 上代码: <div class="post"><h1>By {{fullName author}}</h1><div class="body">{{body}}</div><h1>Comments</h1>{{#each comments}}<h2>By {{fullName author}}</h2><div class="body">{{body}}</div>{{/each}}</div>这个是要⽤到的datavar context = {author: {firstName: "Alan", lastName: "Johnson"},body: "I Love Handlebars",comments: [{author: {firstName: "Yehuda", lastName: "Katz"},body: "Me too!"}]};//就是下⾯这个helper提供了模版中的⾃定义标签;Handlebars.registerHelper('fullName', function(person) {return person.firstName +" "+ stName;});⽣成的结果如下:<div class="post"><h1>By Alan Johnson</h1><div class="body">I Love Handlebars</div><h1>Comments</h1><h2>By Yehuda Katz</h2><div class="body">Me Too!</div></div>代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>test</title></head><body><script src="/jquery/1.9.0/jquery.js"></script><script src="/libs/handlebars.js/2.0.0/handlebars.js"></script><div id="div5"></div><script id="entry-template5" type="text/x-handlebars-template"><div class="post"><h1>By {{fullName author}}</h1><div class="body">{{body}}</div><h1>Comments</h1>{{#each comments}}<h2>By {{fullName author}}</h2><div class="body">{{body}}</div>{{/each}}</div></script><script>var context = {author: {firstName: "Alan", lastName: "Johnson"},body: "I Love Handlebars",body: "I Love Handlebars",comments: [{author: {firstName: "Yehuda", lastName: "Katz"},body: "Me too!"}]};//就是下⾯这个helper提供了模版中的⾃定义标签;Handlebars.registerHelper('fullName', function(person) {return person.firstName + " " + stName;});var source = $("#entry-template5").html();var template = pile(source);var html = template(context);document.getElementById("div5").innerHTML = html;</script></body></html>在⾃定义标签的Helper可以使⽤this, this是当前的对象;<ul>{{#each items}}<li>{{agree_button}}</li>{{/each}}</ul>这个是填充的数据和定义的Helpers:⽣成的结果如下:<ul><li><button>I agree. I love Handlebars</button></li><li><button>I agree. I enjoy Mustache</button></li><li><button>I agree. I want to learn Ember</button></li></ul>如果你希望你返回的HTML代码不被转义, 就要在定义的Helper中返回 new Handlebars.SafeString; return new Handlebars.SafeString(代码)⾃定义标签(Helpers)的更多信息;Handlebars 提供 if 在模版中进⾏简单的逻辑处理; 以及迭代处理的标签 each .//例⼦代码段:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>test</title></head><body><script src="/jquery/1.9.0/jquery.js"></script><script src="/libs/handlebars.js/2.0.0/handlebars.js"></script><div id="div6"></div><script id="entry-template6" type="text/x-handlebars-template">{{#list people}}{{firstName}} {{lastName}}{{/list}}</script><script>var context = {people: [{firstName: "Yehuda", lastName: "Katz"},{firstName: "Carl", lastName: "Lerche"},{firstName: "Alan", lastName: "Johnson"}]};Handlebars.registerHelper('list', function(items, options) {var out = "<ul>";for(var i=0, l=items.length; i<l; i++) {out = out + "<li>" + options.fn(items[i]) + "</li>";}return out + "</ul>";});var source = $("#entry-template6").html();var template = pile(source);var html = template(context);document.getElementById("div6").innerHTML = html;</script></body></html>//handlebars的IF ELSE语句和 each语句的例⼦:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>test</title></head><body><script src="/jquery/1.9.0/jquery.js"></script><script src="/libs/handlebars.js/2.0.0/handlebars.js"></script><div id="div7"></div><script id="entry-template7" type="text/x-handlebars-template">{{#if haveIf}}我有If{{else}}我没有If{{/if}};{{#if haveIf}}我有If{{else}}我没有If{{/if}};{{#each arr}}<p>{{this.a}} > > <span>this.data</span></p>{{/each}}{{!迭代这条对象}}{{#each test}}{{!如果满⾜条件就打印第⼀个模版，如果不满⾜条件就打印第⼆个模版, helper做的只是对数据进⾏判断⽽已}} {{#inverse}}<p>{{this.direct}}</p>{{else}}<p>inverse:{{this.inverse}}</p>{{/inverse}}{{/each}}</script><script>var context = {haveIf : true,arr : [{ a : "a" , data : "___a"},{ a : "b" , data : "___b"},{ a : "c" , data : "___c"}],test : [{condition : true,direct : "打印dir"},{condition : false,direct : "dir",inverse : "打印inverse"}]};Handlebars.registerHelper('inverse', function(options) {if( this.condition ) {return options.fn(this);}else{return options.inverse(this);}});var source = $("#entry-template7").html();var template = pile(source);var html = template(context);document.getElementById("div7").innerHTML = html;</script></body></html>。

handlebars语法

handlebars语法
Handlebars是一种简单而强大的模板引擎，它允许开发人员在
编写HTML时嵌入动态内容。

Handlebars模板使用双大括号{{}}来
标记变量或表达式，这些变量或表达式将在渲染时被替换为实际的值。

除了变量，Handlebars还支持一些控制结构，如if条件语句
和each循环语句。

Handlebars模板的基本语法包括：
1. 变量插值，使用{{}}标记来插入变量，例如{{name}}将被替
换为实际的name变量的值。

2. 块表达式，使用{{#}}和{{/}}标记来创建块表达式，如
{{#if condition}}...{{/if}}和{{#each array}}...{{/each}}。

3. 注释，使用{{!}}来添加注释，这些注释在渲染时会被忽略。

Handlebars还支持一些高级特性，如自定义助手函数和局部模板。

助手函数允许开发人员编写自定义的逻辑来处理模板中的数据，而局部模板则允许将模板分解成可重用的部分。

总的来说，Handlebars提供了一种简洁而灵活的方式来创建动态的HTML模板，使得前端开发更加高效和易于维护。

它的语法简单易懂，同时也具有扩展性，可以满足各种复杂的模板需求。

在实际应用中，开发人员可以根据具体的项目需求来灵活运用Handlebars 的语法特性，以实现页面的动态渲染和数据展示。

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

js模版引擎handlebars.js实用教程——each嵌套
1<!DOCTYPE html>
2<html>
3<head>
4<META http-equiv=Content-Type content="text/html;
charset=utf-8">
5<title>each嵌套 - by 杨元</title>
6</head>
7<body>
8<h1>each嵌套</h1>
9
10<div id="dataList"></div>
11
12
13<script type="text/javascript"src="script/jquery.js"></script> 14<script type="text/javascript"
src="script/handlebars-1.0.0.beta.6.js"></script>
15
16
17
18
19<script id="table-template" type="text/x-handlebars-template">
20 {{#each this}}
21 {{#each info}}
22 {{../name}}的{{this}}<br>
23 {{/each}}
24 {{/each}}
25</script>
26
27
28<script type="text/javascript">
29 $(document).ready(function() {
30//模拟的json对象
31var data = [{
32 "name":"张三",
33 "info":[
34 "眼睛",
35 "耳朵",
36 "鼻子"
37 ]
38 },{
39 "name":"李四",
40 "info":[
41 "爸爸",
42 "妈妈",
43 "妻子"
44 ]
45 }];
46
47//注册一个Handlebars模版，通过id找到某一个模版，获取模版的html框架
48//$("#table-template").html()是jquery的语法，不懂的童鞋请恶补。

49var myTemplate =
pile($("#table-template").html());
50
51//将json对象用刚刚注册的Handlebars模版封装，得到最终的html，插入到基础table中。

52 $('#dataList').html(myTemplate(data));
53 });
54</script>
55</body>
56</html>
循环嵌套在稍微复杂点的页面设计中即会涉及，Handlebars.js完全支持each嵌套，可以在each中使用each。

上边的例子演示了两个关键点：each嵌套的可实现性、如何在each嵌套中读取父each中的数据。

例子很简单，info本身是一个信息列表，是属于某个人的，我们先用each 遍历所有的人，然后再遍历每个人的info信息，这样就形成了each嵌套。

但是我们想在内层each中获取外层each的数据，达到“谁的什么”这样的显示效果。

显然，如果直接在内层each中使用{{name}}，是取不到任何数据的，因为内层each的上下文是info，而name属性在表示人的上下文中。

此时，可以用{{../name}}从内层each获取上一级each的name属性，语法和html的路径表示一样，简单吧？。