HandleBars

优秀博客:http://www.cnblogs.com/iyangyuan/archive/2013/12/12/3471227.html

官网:http://handlebarsjs.com/

注意点:

支持嵌套循环:

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解析,实际上就是做了类似这样的操作:把<用&lt;替代。

     这样做是很好的,既可以显示html代码,又可以避免xss注入。这个功能在做代码展示的时候是非常有用的。

     但是有时候我们可能需要解析html,不要转码,很简单,把{{}}换成{{{}}}就可以啦。



原文地址:https://www.cnblogs.com/lxf1117/p/4454846.html