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，不要轉碼，很簡單，把{{}}換成{{{}}}就能夠啦。