Home  »  前端   »   Handlebars.js 中文文档

Handlebars.js 中文文档

Posted in 前端 By KeenWon On 2014年4月3日 Views: 33,200

使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Handlebars 强大的功能。

开始

Handlebars模板看起来和HTML一样,只是嵌入了 handlebars 表达式

  1. <div class="entry">
  2. <h1>{{title}}</h1>
  3. <div class="body">
  4. {{body}}
  5. </div>
  6. </div>

handlebars表达式以{{开头,中间写一些内容,以}}结尾。

更多内容:表达式

你可以使用<script>标签引入handlebars模板:

  1. <script id="entry-template" type="text/x-handlebars-template">
  2. template content
  3. </script>

在javascript中使用Handlebars.compile编译模板:

  1. var source = $("#entry-template").html();
  2. var template = Handlebars.compile(source);

你也可以预编译你的模板,然后只需引入更小的运行时库(handlebars.runtime.js),避免在浏览器中编译,提高性能,这在移动设备中显得更重要。

更多内容:预编译

传入数据上下文(context),handlebars会执行并生成HTML:

  1. var context = {title: "My New Post", body: "This is my first post!"}
  2. var html = template(context);

得到的结果是:

  1. <div class="entry">
  2. <h1>My New Post</h1>
  3. <div class="body">
  4. This is my first post!
  5. </div>
  6. </div>

更多内容:执行handlebars

HTML编码

在handlebars里,{{expression}}会返回一个经过编码的HTML,如果你不希望被编码,可以使用{{{

  1. <div class="entry">
  2. <h1>{{title}}</h1>
  3. <div class="body">
  4. {{{body}}}
  5. </div>
  6. </div>

使用这样的数据上下文:

  1. {
  2. title: "All about <p> Tags",
  3. body: "<p>This is a post about &lt;p&gt; tags</p>"
  4. }

结果是:

  1. <div class="entry">
  2. <h1>All About &lt;p&gt; Tags</h1>
  3. <div class="body">
  4. <p>This is a post about &lt;p&gt; tags</p>
  5. </div>
  6. </div>

handlebars不会编码Handlebars.SafeString。如果你自定义一个helper,返回一段HTML代码,你需要返回new Handlebars.SafeString(result)。此时,你需要手动对内容进行编码:

  1. Handlebars.registerHelper('link', function(text, url) {
  2. text = Handlebars.Utils.escapeExpression(text);
  3. url = Handlebars.Utils.escapeExpression(url);
  4. var result = '<a href="' + url + '">' + text + '</a>';
  5. return new Handlebars.SafeString(result);
  6. });

这里将会对传入的参数进行编码,返回值是“安全的”,所以就算你不使用{{{,handlebars也不会再次编码了。

块表达式

块表达式允许你定义helper,用不同的数据上下文(context)调用一段模板。下面我们定义一个生成列表的helper:

  1. {{#list people}}{{firstName}} {{lastName}}{{/list}}

如果我们的数据是这样的:

  1. {
  2. people: [
  3. {firstName: "Yehuda", lastName: "Katz"},
  4. {firstName: "Carl", lastName: "Lerche"},
  5. {firstName: "Alan", lastName: "Johnson"}
  6. ]
  7. }

我们创建一个叫list的helper来生成列表,helper接受people作为第一个参数,一个option对象(hash)作为第二个参数。option包含一个属性fn,他可以调用一个context就像普通模板一样。

  1. Handlebars.registerHelper('list', function(items, options) {
  2. var out = "<ul>";
  3. for(var i=0, l=items.length; i<l; i++) {
  4. out = out + "<li>" + options.fn(items[i]) + "</li>";
  5. }
  6. return out + "</ul>";
  7. });

执行后,得到:

  1. <ul>
  2. <li>Yehuda Katz</li>
  3. <li>Carl Lerche</li>
  4. <li>Alan Johnson</li>
  5. </ul>

块表达式有很多特性,例如,可以创建一个else块(内置的if helper就有else块)。另外,如果options.fn(context)对内容编码过了,handlebars就不会helper内容进行编码了,否则就编码两次了。

更多内容:块表达式

Handlebars 路径

Handlebars支持简单的路径

  1. <p>{{name}}</p>

也支持嵌套路径,可以查找下一级的属性

  1. <div class="entry">
  2. <h1>{{title}}</h1>
  3. <h2>By {{author.name}}</h2>
  4. <div class="body">
  5. {{body}}
  6. </div>
  7. </div>

此模板使用下面的数据:

  1. var context = {
  2. title: "My First Blog Post!",
  3. author: {
  4. id: 47,
  5. name: "Yehuda Katz"
  6. },
  7. body: "My first post. Wheeeee!"
  8. };

嵌套路径同样支持../,

  1. <h1>Comments</h1>
  2. <div id="comments">
  3. {{#each comments}}
  4. <h2><a href="/posts/{{../permalink}}#{{id}}">{{title}}</a></h2>
  5. <div>{{body}}</div>
  6. {{/each}}
  7. </div>

尽管链接在打印出的时候,是以comments为上下文的,但是它可以访问到上一级的上下文(context)找到permalink。

../引用上一级的作用域,直接看一下上面模板对应的数据就明白了

  1. var data = {
  2. permalink:'http://keenwon.com',
  3. comments: [
  4. {id:1,title:'链接1',body:'链接1'},
  5. {id:2,title:'链接2',body:'链接2'}
  6. ]
  7. };

Handlebars可以通过this引用解决helpers和数据命名冲突的问题。

  1. <p>{{./name}} or {{this/name}} or {{this.name}}</p>

模板注释 {{! }} or {{!-- --}}

你可以在 handlebars 里加注释:

  1. <div class="entry">
  2. {{! only output this author names if an author exists }}
  3. {{#if author}}
  4. <h1>{{firstName}} {{lastName}}</h1>
  5. {{/if}}
  6. </div>

注释不会出现在输出结果里,如果想要显示出来,可以使用html的注释(会被执行,然后以注释的形式显示,所以如果html注释内有错,还是会报错)

  1. <div class="entry">
  2. {{! 这个注释不会显示在输出结果中 }}
  3. <!-- 会显示 -->
  4. </div>

所有注释必须包含结束标签}},多行注释可以使用{{!-- --}}

Helpers

Handlebars Helpers可以读取到模板中的任何数据上下文,你可以使用Handlebars.registerHelper注册一个helpers。

  1. <div class="post">
  2. <h1>By {{fullName author}}</h1>
  3. <div class="body">{{body}}</div>
  4. <h1>Comments</h1>
  5. {{#each comments}}
  6. <h2>By {{fullName author}}</h2>
  7. <div class="body">{{body}}</div>
  8. {{/each}}
  9. </div>

然后使用如下的数据上下文和Helpers:

  1. var context = {
  2. author: {firstName: "Alan", lastName: "Johnson"},
  3. body: "I Love Handlebars",
  4. comments: [{
  5. author: {firstName: "Yehuda", lastName: "Katz"},
  6. body: "Me too!"
  7. }]
  8. };
  9. Handlebars.registerHelper('fullName', function(person) {
  10. return person.firstName + " " + person.lastName;
  11. });

结果是:

  1. <div class="post">
  2. <h1>By Alan Johnson</h1>
  3. <div class="body">I Love Handlebars</div>
  4. <h1>Comments</h1>
  5. <h2>By Yehuda Katz</h2>
  6. <div class="body">Me Too!</div>
  7. </div>

使用this可以访问到当前的上下文

  1. <ul>
  2. {{#each items}}
  3. <li>{{agree_button}}</li>
  4. {{/each}}
  5. </ul>

使用如下的Helpers和数据上下文

  1. var context = {
  2. items: [
  3. {name: "Handlebars", emotion: "love"},
  4. {name: "Mustache", emotion: "enjoy"},
  5. {name: "Ember", emotion: "want to learn"}
  6. ]
  7. };
  8. Handlebars.registerHelper('agree_button', function() {
  9. return new Handlebars.SafeString(
  10. "<button>I agree. I " + this.emotion + " " + this.name + "</button>"
  11. );
  12. });

结果是:

  1. <ul>
  2. <li><button>I agree. I love Handlebars</button></li>
  3. <li><button>I agree. I enjoy Mustache</button></li>
  4. <li><button>I agree. I want to learn Ember</button></li>
  5. </ul>

如果你的helpers返回一个html片段,不想被编码。必须new一个Handlebars.SafeString返回出来。

内置的Helpers

The with Block Helper

通常,Handlebars会将数据上下文传入编译方法:

  1. var source = "<p>{{lastName}}, {{firstName}}</p>";
  2. var template = Handlebars.compile(source);
  3. template({firstName: "Alan", lastName: "Johnson"});

结果:

  1. <p>Johnson, Alan</p>

使用with可以改变当前的上下文

  1. <div class="entry">
  2. <h1>{{title}}</h1>
  3. {{#with author}}
  4. <h2>By {{firstName}} {{lastName}}</h2>
  5. {{/with}}
  6. </div>

数据上下文如下:

  1. {
  2. title: "My first post!",
  3. author: {
  4. firstName: "Charles",
  5. lastName: "Jolley"
  6. }
  7. }

结果:

  1. <div class="entry">
  2. <h1>My first post!</h1>
  3. <h2>By Charles Jolley</h2>
  4. </div>

The each block helper

你可以使用内置的each helper生成列表,可以使用this访问当前项。

  1. <ul class="people_list">
  2. {{#each people}}
  3. <li>{{this}}</li>
  4. {{/each}}
  5. </ul>

数据上下文如下:

  1. {
  2. people: [
  3. "Yehuda Katz",
  4. "Alan Johnson",
  5. "Charles Jolley"
  6. ]
  7. }

结果:

  1. <ul class="people_list">
  2. <li>Yehuda Katz</li>
  3. <li>Alan Johnson</li>
  4. <li>Charles Jolley</li>
  5. </ul>

你可以在任何上下文里,使用this引用当前的上下文

另外,还可以使用{{else}}块,当列表内容为空的时候会显示{{else}}的内容

  1. {{#each paragraphs}}
  2. <p>{{this}}</p>
  3. {{else}}
  4. <p class="empty">暂无内容</p>
  5. {{/each}}

each中循环每一项的时候,可以使用{{@index}}获取当前的序号。

  1. {{#each array}}
  2. {{@index}}: {{this}}
  3. {{/each}}

对于object,可以使用{{key}}获取当前的key。

  1. {{#each object}}
  2. {{@key}}: {{this}}
  3. {{/each}}

在迭代的过程中,可以使用@first@last判断当前的第一步和最后一步,对于object,只有@first可用。

The if block helper

可以使用if helper有条件的渲染block,如果是falseundefinednull"" 或者 [](a “falsy” value),Handlebars不会渲染此block.

  1. <div class="entry">
  2. {{#if author}}
  3. <h1>{{firstName}} {{lastName}}</h1>
  4. {{/if}}
  5. </div>

如果使用的是空的数据上下文(例如{}),author会返回undefined,结果是:

  1. <div class="entry">
  2. </div>

当使用块表达式,可以使用{{else}}来指定一个“片段”,当结果是 falsy value 的时候呈现

  1. <div class="entry">
  2. {{#if author}}
  3. <h1>{{firstName}} {{lastName}}</h1>
  4. {{else}}
  5. <h1>Unknown Author</h1>
  6. {{/if}}
  7. </div>

The unless block helper

unless的作用和if刚好相反,但表达式返回falsy value的时候渲染block

  1. <div class="entry">
  2. {{#unless license}}
  3. <h3 class="warning">WARNING: This entry does not have a license!</h3>
  4. {{/unless}}
  5. </div>

如果当前上下文的license返回一个falsy value,Handlebars会输出警告信息,否则什么都不输出。

The log block helper

log helper允许执行模板的时候输出当前上下文的状态

  1. {{log "Look at me!"}}

信息传给Handlebars.logger.log,重写这个函数可以实现自定义的log。

内置的工具

Handlebars提供各种工具方法,在Handlebars.Util命名空间下。

Handlebars.js 中文文档的更多相关文章

  1. Chart.js中文文档-雷达图

    雷达图或蛛网图(Radar chart) 简介 A radar chart is a way of showing multiple data points and the variation bet ...

  2. Sails.js中文文档

    Sails.js中文文档   http://sailsdoc.swift.ren/ Sails.js是一个Web框架,可以于轻松构建自定义,企业级Node.js Apps.它在设计上类似于像Ruby ...

  3. Sails.js中文文档,Sails中文文档

    Sails.js中文文档   http://sailsdoc.swift.ren/ Sails.js是一个Web框架,可以于轻松构建自定义,企业级Node.js Apps.它在设计上类似于像Ruby ...

  4. sharp.js中文文档

    高性能node.js图像处理库,使用libvips库来实现. 英文地址:sharp.pixelplumbing.com/ 中文文档地址:yunlzhang.github.io/sharp-docum…

  5. React.js 中文文档

    转自http://react-china.org/t/react-js/398的jsgeeker 中文文档地址 http://reactjs.cn GitHub地址 https://github.co ...

  6. hammer.js中文文档

    转自:http://www.uedsc.com/hammerjs-api.html HammerJS是一个优秀的.轻量级的触屏设备手势库,现在已经更新到2.04版本,跟1.0版本有点天壤地别了,毕竟改 ...

  7. velocity.js 中文文档 (教程)

    velocity.js 是一个简单易用.高性能.功能丰富的轻量级JS动画库.它能和 jQuery 完美协作,并和$.animate()有相同的 API, 但它不依赖 jQuery,可单独使用. Vel ...

  8. Etherscan API 中文文档-交易以及检查交易收据状态

    本文原文链接 点击这里获取Etherscan API 中文文档(完整版) 完整内容排版更好,推荐读者前往阅读. 交易(Transaction) 交易相关的 API,接口的参数说明请参考Ethersca ...

  9. Etherscan API 中文文档-智能合约

    本文原文链接 点击这里获取Etherscan API 中文文档(完整版) 完整内容排版更好,推荐读者前往阅读. 智能合约(Contracts) 智能合约相关的 API,接口的参数说明请参考Ethers ...

随机推荐

  1. java内存模型(线程共享部分)

    1.元空间(MetaSpace)与永久代(PermGen)的区别? ----> 1.1 元空间使用的是本机内存(这样的好处是,可以使用的内存空间变大了,没有OutOfMemoryError:Pe ...

  2. 在Foxmail邮件客户端登录263企业邮箱

    一.问题描述 首次用Foxmail登录263企业,输入账号和密码,创建 二.问题分析 客户端配置地址: 协议类型 服务器地址 默认端 加密端(SSL) POP pop.263.net 110 1995 ...

  3. [IOS初学]ios 第一篇 storyboard 与viewcontroller的关系 - Zoe_J

    时间 2014-07-27 16:08:00  博客园-所有随笔区 原文  http://www.cnblogs.com/zoe-j/p/3871501.html 主题 StoryBoard 学习了一 ...

  4. UVa-1586-分子量

    这是一道字符串的题目,我们直接对字符串进行解析,然后计算就可以了. 我是直接开了两个数组存入对应的值,没有进行判断,我们如果在if判断里面直接增加了i的值,最好先把对应的字符存起来,然后这样才不容易出 ...

  5. js事件 (包含call()方法使用特点)

    1.焦点事件 获取焦点事件onfocus\失去焦点事件onblur 例: oText.onfocus=function(){} 焦点:使浏览器能够区分用户输入的对象,当一个元素有焦点的时候,那么它就可 ...

  6. python 装饰器(二): 加参数

    接上篇python 闭包&装饰器(一) 一.功能函数加参数:实现一个可以接收任意数据的加法器 源代码如下: def show_time(f): def inner(*x, **y): # 形参 ...

  7. Spring Boot 默认配置无法访问静态资源

    问题:将资源放在resources/static目录下,Spring boot不能加载 解决:在启动文件中,添加如下红字部分. @SpringBootApplication @Configuratio ...

  8. 解决Genymotion运行Android 5.0一直卡在开机界面

    在一些机器,启动genymotion 的android5.0版模拟器时,会卡在启动界面,一直启动不了. 这是因为要求的开启虚拟选项没有打开,在第一次启动时,会有提示,但可能大家没有注意(我也没注意到, ...

  9. VK Cup 2015 - Qualification Round 1 A. Reposts [ dp DAG上最长路 ]

    传送门 A. Reposts time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  10. POJ 2749 2SAT判定+二分

    题意:图上n个点,使每个点都与俩个中转点的其中一个相连(二选一,典型2-sat),并使任意两点最大 距离最小(最大最小,2分答案),有些点相互hata,不能选同一个中转点,有些点相互LOVE,必需选相 ...