- 浏览: 881561 次
- 性别:
- 来自: 深圳
文章分类
- 全部博客 (509)
- android (55)
- CSS (23)
- eclipse (25)
- Data Structes and Algorithms (53)
- J2SE (87)
- Java_面试学习_j2se (26)
- java_面试学习_非技术 (13)
- java_gui (2)
- java_设计模式 (27)
- JDBC (10)
- java_web (15)
- hibernate (5)
- Oracle (37)
- Struts2 (7)
- Word-----dos (24)
- Jbpm (3)
- java小技巧 (8)
- math (1)
- flex (12)
- WebService (4)
- 生活 (9)
- 小框架或小语言 (27)
- spring (1)
- 面试~~~软实力 (7)
- jstat的用法 (1)
- jmap (1)
- 数据链路层和传输层的流量控制区别 (1)
- shell (0)
- 财商 (1)
- javascript (0)
- js研究 (1)
- 代码收集 (0)
最新评论
-
海尔群:
http://jingyan.baidu.com/articl ...
android加密 -
完美天龙:
------------------------- ...
asm----字节码操纵 -
houniao1990:
大神,请问 string 类型 定义为 oracle的 cha ...
hibernate注解 -
JamesQian:
Line:103
f.doFilter(msg);
是否需 ...
责任链模式_过滤器模式 -
sacoole:
好评
interview--- 如何从N个数中选出最大(小)的n个数?
安装和使用
Handlebars的安装非常简单,你只需要从Github下载最新版本,我们离发布1.0版本还有点距离,但是handlebars.js已经被许多项目广泛使用了,handlebars是一个纯JS库,因此你可以像使用其他JS脚本一样用script标签来包含handlebars.js:
接下来你可以使用下面的代码来编译,处理以及显示模版。
在上面的代码里我使用了jQuery,但是Handlebars并不依赖jQuery,因此,你也可以使用其他任何一个你喜欢的框架。还有一点就是handlebars会将模版编译成一个JS函数,这样使用起来就方便多了。
基本表达式
handles模版中最简单的动态元件就是表达式(expression),每个表达式像{{表达式}}这样由两个大括号包裹,当模版中出现一个表达式,handlebars会根据上下文来自动对表达式进行匹配,如果匹配项是个变量,则会输出变量的值,如果匹配项是个函数,则函数会被调用。如果没找到匹配项,则没有输出。表达式也支持点操作符,因此你可以使用{{user.firstName}}这样的形式来调用嵌套的值或者方法,handlebars会根据当前上下文输出user变量的firstName属性的值。
另外,handlebars默认会对结果进行escape,如果你希望将结果原样输出,可以使用{{{表达式}}}来告诉handlebars不要对结果进行escape。
Blocks
有时候当你需要对某条表达式进行更深入的操作时,Blocks就派上用场了,在Handlebars中,你可以在表达式后面跟随一个#号来表示Blocks,然后通过{{/表达式}}来结束Blocks。
如果当前的表达式是一个数组,则Handlebars会自动展开数组,并将Blocks的上下文设为数组中的项目,让我们来看看下面的例子:
因为Blocks改变了表达式的上下文,handlebars提供了”../表达式“方式供Blocks中的表达式访问上一层的上下文,所以在上面的例子中,我们可以使用../group很方便的输出group的值:
如果表达式不是一个数组,则Blocks的执行上下文不会变化,这样你可以少打很多字来输出对象的属性。
Handlebars的安装非常简单,你只需要从Github下载最新版本,我们离发布1.0版本还有点距离,但是handlebars.js已经被许多项目广泛使用了,handlebars是一个纯JS库,因此你可以像使用其他JS脚本一样用script标签来包含handlebars.js:
<script type="text/javascript" src="/scripts/handlebars-0.9.0.pre.4.js"> </pre> <p>一开始,你可能想在文件中直接内联模版代码来体验handlebars,很简单,你可以用一个自定义类型的script标签将模版直接包含在文档中:</p> <pre name="code" class="javascript"> <script id="some-template" type="text/x-handlebars-template"> <table> <thead> <th>Username</th> <th>Real Name</th> <th>Email</th> </thead> <tbody> {{#users}} <tr> <td>{{username}}</td> <td>{{firstName}} {{lastName}}</td> <td>{{email}}</td> </tr> {{/users}} </tbody> </table> </script>
接下来你可以使用下面的代码来编译,处理以及显示模版。
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"} ]}; $("#content-placeholder").html(template(data));
在上面的代码里我使用了jQuery,但是Handlebars并不依赖jQuery,因此,你也可以使用其他任何一个你喜欢的框架。还有一点就是handlebars会将模版编译成一个JS函数,这样使用起来就方便多了。
基本表达式
handles模版中最简单的动态元件就是表达式(expression),每个表达式像{{表达式}}这样由两个大括号包裹,当模版中出现一个表达式,handlebars会根据上下文来自动对表达式进行匹配,如果匹配项是个变量,则会输出变量的值,如果匹配项是个函数,则函数会被调用。如果没找到匹配项,则没有输出。表达式也支持点操作符,因此你可以使用{{user.firstName}}这样的形式来调用嵌套的值或者方法,handlebars会根据当前上下文输出user变量的firstName属性的值。
另外,handlebars默认会对结果进行escape,如果你希望将结果原样输出,可以使用{{{表达式}}}来告诉handlebars不要对结果进行escape。
Blocks
有时候当你需要对某条表达式进行更深入的操作时,Blocks就派上用场了,在Handlebars中,你可以在表达式后面跟随一个#号来表示Blocks,然后通过{{/表达式}}来结束Blocks。
如果当前的表达式是一个数组,则Handlebars会自动展开数组,并将Blocks的上下文设为数组中的项目,让我们来看看下面的例子:
var data ={ people:[ {name:"Alan"}, {name:"Allison"}, {name:"Ryan"} ], group:"Bloggers"}; <script type="text/x-handlebars-template"> <ul> {{#people}} <li>{{name}}</li> {{/people}} </ul> </script>
因为Blocks改变了表达式的上下文,handlebars提供了”../表达式“方式供Blocks中的表达式访问上一层的上下文,所以在上面的例子中,我们可以使用../group很方便的输出group的值:
<script type="text/x-handlebars-template"> <ul> {{#people}} <li>{{name}} - {{../group}}</li> {{/people}} </ul> </script>
如果表达式不是一个数组,则Blocks的执行上下文不会变化,这样你可以少打很多字来输出对象的属性。
var data ={ person:{ firstName:"Alan", lastName:"Johnson", email:"alan@test.com", phone:"123-456-7890" }}; <script type="text/x-handlebars-template"> {{#person}} <div>Name: {{firstName}} {{lastName}}</div> <div>Email: {{email}}</div> <div>Phone: {{phone}}</div> {{/person}} </script>
发表评论
-
jqplot参数描述
2012-10-17 10:20 2736jqPlot 图形报表插件简介及参数详解(jquery) ... -
Apache 代理(Proxy)
2012-08-16 17:23 1722代理分为:正向代理(Foward Proxy)和反向代理(Re ... -
Apache 2.2-SSL操作大全
2012-08-11 20:06 1583制作CSR申请文件 安装证书文件 客户端证书认证 强制H ... -
HTTP返回码中301与302的区别
2012-08-11 17:04 9346一.官方说法 301,302 ... -
win7ppt打开两个的问题
2012-08-08 10:09 19381、引言 Excel 是我们最常用的办公软件之一,在日常工作中 ... -
xsi:schemaLocation
2012-08-05 10:57 1628在实例中引用模式文档 XML Schema提供了两个在实例 ... -
sublime text 快捷键
2012-07-28 10:40 1176快捷键 XP版 Ctrl+L 选择整行 ... -
webx常用标签收集
2012-07-10 09:59 1226#set($spmHome="/static&quo ... -
java调用domino
2012-06-20 17:52 1273java访问操作lotus domino数据库 有几种方式: ... -
Lotus Domino/Notes Toolkits 综述(注:转)
2012-06-20 17:04 1613http://wind-bell.iteye.com/blog ... -
notes数据库api
2012-06-20 16:42 1864用Java远程操作Domino服务器的例子 1.服务器必 ... -
cron
2012-06-09 09:15 2678上一文中提到 Cron触发 ... -
quartz与mysql连接 持久化
2012-06-07 10:10 4503Mysql相关软件: MySQL-server-communi ... -
quartz
2012-06-06 19:14 1507http://blog.csdn.net/bibitoo712 ... -
史上最简! Subvision SVN (svn的服务器端) 安装教程
2012-04-19 10:02 1302由于 indian 写的Subvision安装教程实在是太好了 ... -
反编译还原总结
2011-12-11 15:06 2025java class 利用jad 反编译之后,偶尔回碰到一 ... -
asm解读
2011-09-06 22:45 1171目的: 程序分析:用于分析程序,动态生成proxy等。 程序生 ... -
svn命令
2011-07-18 19:34 1431svn命令 通常都有帮助,可通过如下方式查询: $ svn ... -
maven-----概念
2011-06-28 14:32 1564常用maven命令 mvn clean install -Ds ... -
svn编程
2011-06-02 20:24 1678API文档: http://svnkit.com/jav ...
相关推荐
HandleBar.js是一个强大的JavaScript模板引擎,它为开发者提供了一种高效的方式来组织和处理HTML文档的结构。这个模板引擎主要用于客户端渲染,但也适用于服务器端。在本教程中,我们将深入探讨HandleBar.js的基本...
Spring Boot Starter Handlebars将根据项目依赖关系自动注册handlerbar帮助器。 将任何车把助手添加到依赖项,就可以开始使用它了。 dependencies { compile ' com.github.jknack:handlebars-helpers:4.2.0 ' , '...
因此,目前的依赖关系是JQuery和Handlerbar.js。 Routerjs的实际应用 检查实时示例: : 如何使用: 只需包含:具有相关性(JQuery,Handlerbars)的routes.css,routes.js到您的html < link rel =" sty
卷发棒Curlybars是Handlebars子集的Ruby实现,其中获取用于渲染模板的上下文基于采用的presenter方法。目录概述Curlybars是Ruby的模板引擎,它与Rails开箱即用地集成在一起。 为了与Rails一起使用,必须为要通过...
《handlebars-rust:驾驭模板引擎的锈迹之美》 在软件开发中,模板引擎扮演着重要的角色,它使得开发者可以将数据与呈现结构分离,从而实现动态内容的渲染。handlebars是一种流行的JavaScript模板语言,因其简洁...