HandleBars
优秀博客:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html
注意点:
支持嵌套循环:
this指当前上下文
循环中的索引使用:@index (从0开始的)
{{addOne @index}}
//注册一个Handlebars Helper,用来将索引+1,因为默认是从0开始的 Handlebars.registerHelper("addOne",function(index,options){ return parseInt(index)+1; });
扩展方法:
Handlebars.registerHelper用来定义Helper,它有两个参数,第一个参数是Helper名称,第二个参数是一个回调函数,用来执行核心业务逻辑。回调函数可以有至少1个参数,最后一个参数是固定的,就叫options,如果加了该参数,就说明这个Helper是一个Block,块级别的Helper,有一定的语法结构,调用的时候加#号,就像if那样。
关于options的使用,小菜所了解的就是这种用法,return options.fn(this);表示满足条件继续执行,也就是执行{{#compare }}和{{else}}之间的代码;return options.inverse(this);表示不满足条件,也就是执行{{else}}和{{/compare}}之间的代码。
如:
//注册一个比较大小的Helper,判断v1是否大于v2 78 Handlebars.registerHelper("compare",function(v1,v2,options){ 79 if(v1>v2){ 80 //满足添加继续执行 81 return options.fn(this); 82 }else{ 83 //不满足条件执行{{else}}部分 84 return options.inverse(this); 85 } 86 });
块级调用: {{#compare age 20}} 。。。。 {{else}} 。。。 {{/compare}}
//注册一个翻译用的Helper,0翻译成男,1翻译成女 90 Handlebars.registerHelper("transformat",function(value){ 91 if(value==0){ 92 return "男"; 93 }else if(value==1){ 94 return "女"; 95 } 96 });
带options参数的Helper是块级别的,而不带的,相当于行内级别的Helper:这样调用{{transformat sex}}
Html编码:
通过{{}}取出来的内容,都会经过编码,也就是说,如果取出的内容中包含html标签,会被转码成纯文本,不会被当成html解析,实际上就是做了类似这样的操作:把<用<替代。
这样做是很好的,既可以显示html代码,又可以避免xss注入。这个功能在做代码展示的时候是非常有用的。
但是有时候我们可能需要解析html,不要转码,很简单,把{{}}换成{{{}}}就可以啦。