Helpers


其实在Handlebars模板引擎之进阶我想说if else的功能的,可是由于这个功能在我的开发中我觉的鸡肋没啥用,就直接不用了。

因为if else只能进行简单判断,如果条件参数返回 false, undefined, null, "" 或 [](非真的值)时,Handlebars 将不渲染。

类似这样

{{#each this}}
{{#if this.show}} {{/if}}
{{/each}}

并不能进行二元的运算,类似这样

{{#each this}}
{{#if this.show == 'showtime' }} {{/if}}
{{/each}}

所以用的不多,如果有类似上面的二元的话,需要借助Helpers来操作。

具体来看下用Handlebars是什么东西。

var myTemplate = Handlebars.compile($("#table-template").html());
Handlebars.registerHelper("addOne", function(index, options) {
return parseInt(index, 10) + 1;
});
$('#table tbody').html(myTemplate(data));

注册Helper后,使用

<td>{{ addOne @index }}</td>

这里我就以上文中,表格序号为引。

表格需要以0开头应该是很怪,所以我们需要以1开头。如果只是简单的js的话,直接index+1就完事了。但是我们这是模板引擎,我们需要按照她的规则来。

这里我们就通过Handlebars.registerHelper()注册了一个Helper(上帝之手)。

然后传递一个helper的名称,一个回调函数,函数中的参数,就是我们注入进去的@index索引值。

效果:

更进一部的官方例子:

<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>

模板

var context = {
author: {firstName: "Alan", lastName: "Johnson"},
body: "I Love Handlebars",
comments: [{
author: {firstName: "Yehuda", lastName: "Katz"},
body: "Me too!"
}]
}; Handlebars.registerHelper('fullName', function(person) {
return person.firstName + " " + person.lastName;
});

结果:

<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>

Handlebars模板引擎之高阶的更多相关文章

  1. Handlebars模板引擎中的each嵌套及源码浅读

    若显示效果不佳,可移步到愚安的小窝 Handlebars模板引擎作为时下最流行的模板引擎之一,已然在开发中为我们提供了无数便利.作为一款无语义的模板引擎,Handlebars只提供极少的helper函 ...

  2. handlebars模板引擎使用初探1

    谈到handlebars,我们不禁产生疑问,为什么要使用这样的一个工具呢?它究竟能为我们带来什么样的好处?如何使用它呢? 一.handlebars可以干什么? 首先,我们来看一个案例: 有这样的htm ...

  3. Handlebars 模板引擎之前后端用法

    前言 不知不觉间,居然已经这么久没有写博客了,坚持还真是世界上最难的事情啊. 不过我最近也没闲着,辞工换工.恋爱失恋.深圳北京都经历了一番,这有起有落的生活实在是太刺激了,就如拿着两把菜刀剁洋葱一样, ...

  4. express-9 Handlebars模板引擎(2)

    视图和布局 视图通常表现为网站上的各个页面(它也可以表现为页面中AJAX局部加载的内容,或一封电子邮件,或页面上的任何东西).默认情况下,Express会在views子目录中查找视图.布局是一种特殊的 ...

  5. express-8 Handlebars模板引擎(1)

    简介 使用JavaScript生成一些HTML document.write('<h1>Please Don\'t Do This</h1>'); document.write ...

  6. Handlebars模板引擎之上手

    handlebars Handlebars,一个JavaScript模板引擎,是基于Mustache的扩展.模板引擎的都存在一个上下文环境,这是它的作用区间. 需求:基本使用 需要的库 <scr ...

  7. Handlebars模板引擎之进阶

    取得索引 我想取得索引作为序号这个是常用的.在handlebars也是存在的. 就是使用 @index 来获取索引 {{#each this}} <tr> <td>{{ @in ...

  8. 【转】在Express项目中使用Handlebars模板引擎

    原文:http://fraserxu.me/2013/09/12/Using-Handlebarsjs-with-Expressjs/ 最近在用Expressjs做一个项目,前后端都用它来完成.自己之 ...

  9. 【转链接】Handlebars模板引擎以及浅谈模板引擎的实现原理

    什么叫做“模板引擎“?我是这么理解的:就是对一些待填入数据的占位符的解析.如果你使用过Python的django框架,那你肯定是模板一点也不陌生.模板引擎就是解析模板的,把后端数据塞到前端页面模板. ...

随机推荐

  1. C#简单画图Draw研究学习

    命名空间:using System.Drawing; Graphics类:有道词典翻译 在C#里是封装一个 GDI+ 绘图图面,此类不能被继承. Pen类:定义用于绘制直线和曲线的对象. 此类不能被继 ...

  2. Enrolment API

    由于Moodle 2.0有一个用户注册的新概念,它们完全独立于角色和功能.能力通常与注册状态结合使用. 什么是注册? 登记的用户可以完全参加一门课程.活跃用户注册允许用户输入课程.只有注册的用户可能是 ...

  3. symmfony

    安装:http://symfony.cn/docs/book/installation.html 1先检查php版本是否符合你要下载的symfony的最低版本: php -version 系统安装完成 ...

  4. 一道有意思的多线程面试题 C# 代码实现

    如果你对多线程的控制不怎么了解,那么理解了这篇文章的内容也许对你有帮助.鼓励先自己动手实现一遍,做不出来在看代码. 题目一:两个线程交替打印0~100的奇偶数 这道题就是说有两个线程,一个名为偶数线程 ...

  5. Orleans高级功能

    一.Reentrant Grains二.请求上下文三.激活垃圾收集四.外部任务和Grains五.序列化六.代码生成七.在Silo内的应用程序引导八.拦截器九.取消令牌十.Powershell客户端十一 ...

  6. 用redis来实现Session保存的一个简单Demo

    现在很多项目都用Redis(RedisSessionStateProvider)来保存Session数据,但是最近遇到一个比较典型的情况,需要把用户数据全部load到redis里面,在加上RedisS ...

  7. C# DataGridView插入DB

    public static bool ContrastColumns(DataColumnCollection co1, DataGridViewColumnCollection co2) { boo ...

  8. Javascript实现对象的继承

    在Java和C#中,你可以简单的理解class是一个模子,对象就是被这个模子压出来的一批一批月饼.压个啥样,就得是个啥样,不能随便动,动一动就坏了.而在Javascript中,没有模子,月饼被换成了面 ...

  9. jQueryPrint 的简单使用

    jQueryPrint 的简单使用 一.为什么要使用 jQueryPrint?  1.当然是方便的要死尼,相比于其他的方法. 2.打印整个页面或者局部页面都是非常的可以的,使用很方便. 3.如果要导出 ...

  10. 非常简单的方法实现ViewPager自动循环轮播

    非常简单的方法实现ViewPager自动循环轮播,见红色代码部分,其它的代码可以忽略不看. 简洁高效是我解决问题的首要出发点. package com.shuivy.happylendandreadb ...