handlebars自定義helper的寫法

helper大概可以分為兩類，一類是用於格式化輸出資料，使用起來像這樣：}，官方沒有給起名字，我姑且叫做簡單helper好了。另一類叫塊級helper，塊級helper有自己的作用域，可以拿到上下文資料，並可以定義渲染的內容，可以發揮的作用就比較大了。通過這兩類helper，handlebars由乙個弱邏輯的模板可以擴充套件出很強大的功能。通過registerhelper方法，我們便可以註冊乙個helper。下面先看一下簡單helper。

簡單helper主要用來對資料進行格式化，例如我們經常會格式化日期、數字、金額等等。看乙個例子就明白了，此處我寫乙個把數字進行千分位分割的helper，所謂千分位分割就是把123456789這樣的值格式化為123,456,789.**如下：

handlebars.registerhelper('formatnumber', function
(num, options))+(?:\.|$))(\d(\.\d+$)?)/g,',$1');
});

然後就可以在模板中使用：

registerhelper的第乙個引數是helper的名稱，我這裡把它叫做formatnumber，第二個引數是乙個函式，該函式傳入的第乙個引數就是我們在使用helper時候的值，如上面的num，最後，函式return的內容就是我們模板中輸出的內容。此外還會傳入第二個引數options，options是乙個物件，包含上下文相關的一些資訊，不過在簡單helper中用不到，我們會下面在塊級helper中詳細說說。

乙個簡單helper的定義就是如此簡單，真如其名~

塊級helper的能力就強大很多，可以實現一些自己想要的迭代器，或者增強判斷語句等。主要依賴的就是這個options引數。下面通過乙個例子來說明一下。

handlebars的if語句只能進行true/false判斷，如果我們想判斷乙個數字是否是偶數，我這麼寫是不可以的：}，if不支援表示式，也不支援==這樣的操作符。所以要想在模板中判斷偶數，我們需要定義乙個helper。**如下：

//
判斷是否是偶數
handlebars.registerhelper('if_even', function
(value, options) 
console.log('fn(this):', options.fn(this)); //
fn(this): 2是偶數
if((value % 2) == 0)  
else
});

然後我們造乙個資料，寫在模板中來看看：

var data3 =

模板中：

}
}是偶數
}      }是奇數
}

得到的結果是輸出「2是偶數」。通過在**中log出的資料，可以看到用this可以取到當前的上下文主體，此處就是我們的定義好的資料物件了。另外乙個比較重要的就是options.fn方法，此方法可以將你傳入的上下文主體編譯到模板，返回編譯後的結果，在helper中，我們把this傳了進去，於是在模板中也可以引用到它。最終options.fn返回編譯後的結果：2是偶數。其實你也可以為options.fn傳入其他的上下文物件，比如你要寫乙個迭代器，可以把陣列的元素依次傳入。

此處我們還看到了另乙個方法，options.inverse，它是取相反的意思，對應了我們模板中的}標籤，它會編譯}中的的內容並返回結果，如果我們的helper中需要帶else邏輯，用它就可以了。

塊級helper在用的時候開頭要加"#"，並且要有結束符，就是上面的}

自定義helper可以傳入多個引數，只要依次寫在registerhelper的函式中就可以了，看下面乙個例子。

由於handlebars內建的if語句太弱，有時候我們需要判斷像==、!=、>、《這樣的邏輯，就必須自己寫定義helper了。這樣的helper需要傳入左右運算元還有操作符，引數不只乙個。下面這個compare是從別的地方抄來的，也是我在專案中用的最多的：

使用的時候是這樣：

}
他的名字是peter
}他的名字不是peter
}

可以看到在模板中傳入的引數依次對應helper定義中的left、operator、options。同時定義中也是用了options.inverse，用來處理else的邏輯。

在模板中使用helper的時候，我們還可以為helper傳入一些變數引數，叫做hash引數，在helper中可以通過options.hash拿到這些引數進行處理。這樣helper的靈活性和可復用性就大大增強了。我們還是舉例來說明。

定義乙個名為list的helper，它的作用是迴圈輸出資料，並把資料報裹在ul>li標籤中。同時為了給元素增加不同的class，我把class名稱作為hash來傳入。helper**如下：

handlebars.registerhelper('list', function
(items, options) );

在模板中，我使用了兩次list，並傳入不同的hash值：

}}-----}}
}}-----}}

定義以下資料做測試：

var data =,,]
}

最終頁面上生成的節點如下所示：

這樣我們就重用了同乙個helper，完成了更加靈活的任務。看到這裡，是不是覺得helper很強大了呢，利用上面這些特性，我們可以寫出非常豐富的功能了，足以滿足開發需求。

另外還有兩點的小知識，補充在此處：

1. helper的銷毀

呼叫handlebars.unregisterhelper('list')即可銷毀乙個helper

2. 一次註冊多個helper

andlebars.registerhelper(,
bar: 
function
() {}
});

handlebars作為乙個弱邏輯的靜態模板引擎，本身簡單好用，沒有太多冗餘的東西，同時還提供了強大的擴充套件性，這也是我喜歡它的原因。希望通過本篇文章能讓你更多的了解handlebars的helper，開始喜歡上它。

handlebars自定義helper的寫法

handlebars自定義helper的寫法

自定義如何自定義協議

自定義控制項自定義鐘錶

handlebars自定義helper的寫法

handlebars自定義helper的寫法

自定義 如何自定義協議

自定義控制項 自定義鐘錶

相關推薦

自定義如何自定義協議

自定義控制項自定義鐘錶