handlebars相对来讲算一个轻量级、高性能的模板引擎,因其简单、直观、不污染HTML的特性。另一方面,handlebars作为一个logicless的模板,不支持特别复杂的表达式、语句,只内置了一些基本的语法,像if、each这些。可惜的是就连if都十分弱,只能判断值是否为true/false,或转化后是否为true/false,不能对值进行比较。不过,handlebars提供了自定义helper的能力,通过自定义helper,可以实现非常丰富的功能。

handlebar 对于对象的操作:存在几个方面的获取方法 :

{{@index}} -------------获取索引

{{@key}}----------------获取键值

{{@first}}----------------获取数组的第一个

{{@last}}----------------获取数组的最后一个

{{@key}}----------------获取数组的键

{{this}}-----------------当前值

{{../this}}---------------嵌套循环获取上面一个循环中的值

本篇来总结一下handlebars注册helper都有哪些方式,以及一些相关的知识。
helper大概可以分为两类,一类是用于格式化输出数据,使用起来像这样:{{formatDate date}},官方没有给起名字,我姑且叫做简单helper好了。另一类叫块级helper,块级helper有自己的作用域,可以拿到上下文数据,并可以定义渲染的内容,可以发挥的作用就比较大了。通过这两类helper,handlebars由一个弱逻辑的模板可以扩展出很强大的功能。通过registerHelper方法,我们便可以注册一个helper。下面先看一下简单helper。
简单helper
简单helper主要用来对数据进行格式化,例如我们经常会格式化日期、数字、金额等等。看一个例子就明白了,此处我写一个把数字进行千分位分割的helper,所谓千分位分割就是把123456789这样的值格式化为123,456,789.代码如下:

Handlebars.registerHelper('formatnumber', function(num, options){
num = num + '';
return num.replace(/(?=(?!^)(?:\d{3})+(?:\.|$))(\d{3}(\.\d+$)?)/g,',$1');
});

然后就可以在模板中使用:

{{formatnumber num}}

registerHelper的第一个参数是helper的名称,我这里把它叫做formatnumber,第二个参数是一个函数,该函数传入的第一个参数就是我们在使用helper时候的值,如上面的num,最后,函数return的内容就是我们模板中输出的内容。此外还会传入第二个参数options,options是一个对象,包含上下文相关的一些信息,不过在简单helper中用不到,我们会下面在块级helper中详细说说。
一个简单helper的定义就是如此简单,真如其名~
块级helper
块级helper的能力就强大很多,可以实现一些自己想要的迭代器,或者增强判断语句等。主要依赖的就是这个options参数。下面通过一个例子来说明一下。
handlebars的if语句只能进行true/false判断,如果我们想判断一个数字是否是偶数,我这么写是不可以的:{{#if num%2 == 0}},if不支持表达式,也不支持==这样的操作符。所以要想在模板中判断偶数,我们需要定义一个helper。代码如下:

//判断是否是偶数
Handlebars.registerHelper('if_even', function(value, options) {
console.log('value:', value); // value: 2
console.log('this:', this); // this: Object {num: 2}
console.log('fn(this):', options.fn(this)); // fn(this): 2是偶数
if((value % 2) == 0) {
return options.fn(this);
} else {
return options.inverse(this);
}
});

然后我们造一个数据,写在模板中来看看:

var data3 = {
num : 2
}

模板中:

{{#if_even num}}
{{this.num}}是偶数
{{else}}
{{this.num}}是奇数
{{/if_even}}

得到的结果是输出“2是偶数”。通过在代码中log出的数据,可以看到用this可以取到当前的上下文主体,此处就是我们的定义好的数据对象了。另外一个比较重要的就是options.fn方法,此方法可以将你传入的上下文主体编译到模板,返回编译后的结果,在helper中,我们把this传了进去,于是在模板中也可以引用到它。最终options.fn返回编译后的结果:2是偶数。其实你也可以为options.fn传入其他的上下文对象,比如你要写一个迭代器,可以把数组的元素依次传入。
此处我们还看到了另一个方法,options.inverse,它是取相反的意思,对应了我们模板中的{{else}}标签,它会编译{{else}}中的的内容并返回结果,如果我们的helper中需要带else逻辑,用它就可以了。
块级helper在用的时候开头要加"#",并且要有结束符,就是上面的{{/if_even}}
接收多个参数的helper
自定义helper可以传入多个参数,只要依次写在registerHelper的函数中就可以了,看下面一个例子。
由于handlebars内置的if语句太弱,有时候我们需要判断像==、!=、>、<这样的逻辑,就必须自己写定义helper了。这样的helper需要传入左右操作数还有操作符,参数不只一个。下面这个compare是从别的地方抄来的,也是我在项目中用的最多的:

Handlebars.registerHelper('compare', function(left, operator, right, options) {
if (arguments.length < 3) {
throw new Error('Handlerbars Helper "compare" needs 2 parameters');
}
var operators = {
'==': function(l, r) {return l == r; },
'===': function(l, r) {return l === r; },
'!=': function(l, r) {return l != r; },
'!==': function(l, r) {return l !== r; },
'<': function(l, r) {return l < r; },
'>': function(l, r) {return l > r; },
'<=': function(l, r) {return l <= r; },
'>=': function(l, r) {return l >= r; },
'typeof': function(l, r) {return typeof l == r; }
};
if (!operators[operator]) {
throw new Error('Handlerbars Helper "compare" doesn\'t know the operator ' + operator);
}
var result = operators[operator](left, right);
if (result) {
return options.fn(this);
} else {
return options.inverse(this);
}
});

使用的时候是这样:

{{#compare people.name '==' 'peter'}}
他的名字是peter
{{else}}
他的名字不是peter
{{/compare}}

可以看到在模板中传入的参数依次对应helper定义中的left、operator、options。同时定义中也是用了options.inverse,用来处理else的逻辑。
为helper传入hash参数
在模板中使用helper的时候,我们还可以为helper传入一些变量参数,叫做hash参数,在helper中可以通过options.hash拿到这些参数进行处理。这样helper的灵活性和可复用性就大大增强了。我们还是举例来说明。
定义一个名为list的helper,它的作用是循环输出数据,并把数据包裹在ul>li标签中。同时为了给元素增加不同的class,我把class名称作为hash来传入。helper代码如下:

Handlebars.registerHelper('list', function(items, options) {
var out = '<ul>';
for(var i=0, l=items.length; i<l; i++) {
var item = options.fn(items[i]);
out = out + '<li class="+options.hash.class+">' + item + '</li>';
}
return out + '</ul>';
});

在模板中,我使用了两次list,并传入不同的hash值:

{{#list people class="green"}}{{firstName}}-----{{lastName}}{{/list}}
{{#list people class="red"}}{{firstName}}-----{{lastName}}{{/list}}

定义以下数据做测试:

var data = {
people: [
{firstName: "Yehuda", lastName: "Katz"},
{firstName: "Carl", lastName: "Lerche"},
{firstName: "Alan", lastName: "Johnson"}
]
}

最终页面上生成的节点如下所示:
这样我们就重用了同一个helper,完成了更加灵活的任务。看到这里,是不是觉得helper很强大了呢,利用上面这些特性,我们可以写出非常丰富的功能了,足以满足开发需求。
其他
另外还有两点的小知识,补充在此处:
1. helper的销毁
调用Handlebars.unregisterHelper('list')即可销毁一个helper
2. 一次注册多个helper

andlebars.registerHelper({
foo: function() {},
bar: function() {}
});

handlebars作为一个弱逻辑的静态模板引擎,本身简单好用,没有太多冗余的东西,同时还提供了强大的扩展性,这也是我喜欢它的原因。希望通过本篇文章能让你更多的了解handlebars的helper,开始喜欢上它。

handlebar helper帮助方法的更多相关文章

  1. chrome浏览器下的xdebug helper使用方法

    chrome浏览器下的xdebug helper使用方法     自从安装了xdebug后,发现每次调试都需要从eclipse中先从头启动,然后一步步走到你要调试的页面,而不是说想什么时候调试就什么时 ...

  2. MVC4 @helper辅助方法

    Razor提供了一种很方便的语法,可以将view页面中部分内容或部分代码抽取出来,变成一个独立的辅助方法.   eg1: @foreach(var item in Model){ <标签tr&g ...

  3. 【转】CodeIgniter定义自己的Helper和Helper的方法

    最近做程序,采用了PHP+CodeIgniter框架,总体来说这框架很轻而且上手也很快的. 首先,说下如何定义自己的Helper,个人理解helper其实就是定义函数方法. 如果要建个全新的自己的He ...

  4. 自定义MVC的Helper扩展方法

    记得在开发ASP.NET时候,也经常性使用C#可以写自己义的扩展方法,如:http://www.cnblogs.com/insus/p/3154363.html 或http://www.cnblogs ...

  5. 自定义MVC的Helper扩展方法 转 Insus.NET

    记得在开发ASP.NET时候,也经常性使用C#可以写自己义的扩展方法,如: http://www.cnblogs.com/insus/p/3154363.html 或http://www.cnblog ...

  6. handlebar的一些用法——个人使用总结

    handlebar的一些用法 概述与介绍 Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板.它采用"Logic-less t ...

  7. MVC学习系列4--@helper辅助方法和用户自定义HTML方法

    在HTML Helper,帮助类的帮助下,我们可以动态的创建HTML控件.HTML帮助类是在视图中,用来呈现HTML内容的.HTML帮助类是一个方法,它返回的是string类型的值. HTML帮助类, ...

  8. .NET开发中经常用到的扩展方法

    整理一下自己经常用到的几个扩展方法,在实际项目中确实好用,节省了不少的工作量. 1  匿名对象转化 在WinForm中,如果涉及较长时间的操作,我们一般会用一个BackgroundWorker来做封装 ...

  9. handlebar.js使用

    官方网站:http://handlebarsjs.com/ 下载及查看使用帮助,或者用百度cdn引用 一.定义模板 <script id="entry-template" t ...

随机推荐

  1. SharedPreferences 详解(多进程,存取数组解决方案)

    一.SharedPreferences基本概念 文件保存路径:/data/data/<包名>/shared_prefs目录下目录下生成了一个SP.xml文件 SharedPreferenc ...

  2. Windows下安装Tomcat服务

    startup.bat中添加以下内容 setlocal SET JAVA_HOME=D:\Program Files\Java\jdk1.8.0_05 SET CATALINA_HOME=D:\Pro ...

  3. 多条件查询(php+mysql) 租房子例子

    <body> <?php //多条件 $tiaojian2= " 2=2 "; $attr2 = ""; //判断区域 if(!empty($ ...

  4. HDU 5269 ZYB loves Xor I (二分法)

    题意: 给出一个序列,对每两个数求异或结果后取最低位的1出来作为一个数,然后求这些数字的和.比如:{a,b,c},结果是lowbit(a^b)+lowbit(a^c)+lowbit(b^a)+lowb ...

  5. 【转】如何在Mac上撰寫C++程式

    原文: http://www.macuknow.com/node/4901 本文使用的开发环境:Xcode 5.其实步骤很简单,只需要简单的几步就ok了. 點選Create a new Xcode p ...

  6. validform 怎么验证小数。

    <input type="text" class="input-text" value="{$info.score}" placeho ...

  7. jquery html() callback

    通过JQuery的.html()函数我们可以非常方便地加载一段HTML到指定的元素中,例如给<div></div>中放入一组图片.问题是JQuery的.html()函数是同步的 ...

  8. 微软开源大规模数据处理项目 Data Accelerator

    微软开源了一个原为内部使用的大规模数据处理项目 Data Accelerator.自 2017 年开发以来,该项目已经大规模应用在各种微软产品工作管道上. 据微软官方开源博客介绍,Data Accel ...

  9. Canny提取图像轮廓

    #include <iostream> #include <opencv2/core/core.hpp> #include <opencv2/highgui/highgu ...

  10. 第三周作业(三)---WordCounter

    需求是这样的.写出一个程序,模仿wc.exe,可以统计出文件的一些信息(比如字符数.单词数目等等) 对于这个程序,我仍然用我从大一学来的C语言写的. 第一步:打开文件 printf("请输入 ...