`

handlerbar

 
阅读更多
安装和使用

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>

分享到:
评论

相关推荐

    HandleBar.js基本使用

    HandleBar.js是一个强大的JavaScript模板引擎,它为开发者提供了一种高效的方式来组织和处理HTML文档的结构。这个模板引擎主要用于客户端渲染,但也适用于服务器端。在本教程中,我们将深入探讨HandleBar.js的基本...

    handlebars-spring-boot-starter:车把的Spring Boot自动配置

    Spring Boot Starter Handlebars将根据项目依赖关系自动注册handlerbar帮助器。 将任何车把助手添加到依赖项,就可以开始使用它了。 dependencies { compile ' com.github.jknack:handlebars-helpers:4.2.0 ' , '...

    Routerjs:jQuery的路由器

    因此,目前的依赖关系是JQuery和Handlerbar.js。 Routerjs的实际应用 检查实时示例: : 如何使用: 只需包含:具有相关性(JQuery,Handlerbars)的routes.css,routes.js到您的html &lt; link rel =" sty

    curlybars:Ruby中与Handlebars.js兼容的模板库

    卷发棒Curlybars是Handlebars子集的Ruby实现,其中获取用于渲染模板的上下文基于采用的presenter方法。目录概述Curlybars是Ruby的模板引擎,它与Rails开箱即用地集成在一起。 为了与Rails一起使用,必须为要通过...

    handlebars-rust:用车把模板生锈

    《handlebars-rust:驾驭模板引擎的锈迹之美》 在软件开发中,模板引擎扮演着重要的角色,它使得开发者可以将数据与呈现结构分离,从而实现动态内容的渲染。handlebars是一种流行的JavaScript模板语言,因其简洁...

Global site tag (gtag.js) - Google Analytics