handlebars.js的運用與整理

最近在作部門的技術分享網站，主要是一些文章的列表和演講信息展現，內容比較規律，複用性較高。同事推薦了 handlebars.js。用來看看。

handlebars.js是一種靜態JS模板，用起來還蠻簡單的，好比：你想要生成某一大片界面，這一片界面有必定規律。
好比個人這個網站，都標題，副標題，主講人，演講時間，地點，介紹等，雖然內容會有區別，可是結構同樣的，因此預寫個界面模板，裏面凡有可能變的地方，用變量代替，表達式{{}}，而後每次拿不一樣的數據代入，生成最終的結果HTML。

 

handlebars是一個純js庫，所以你能夠像使用其餘JS腳本同樣用script標籤來包含handlebars.js

<script type="text/javascript" src="js/handlebars.js"></script>  

基本語法：

Handlebars expressions 是handlebars模板中最基本的單元，使用方法是加兩個花括號{{value}}, handlebars模板會自動匹配相應的數值，對象甚至是函數。

能夠單獨創建一個模板,ID（或者class）和type很重要，由於要用他們來獲取模板內容。

#號來表示Blocks，而後經過{{/表達式}}來結束Blocks

<script id="nav_template" type="text/x-handlebars-template">
{{#each nav_list}}
　　<a href="{{nav_list_url}}" >{{nav_list_name}}</a>
{{/each}}
</script>

JSON數據：

var nav={
		"nav_list":[{      //導航列表
			"nav_list_url":"#nogo",
			"nav_list_name":"數據基礎環境"
		},{
			"nav_list_url":"#nogo",
			"nav_list_name":"應用開發"
		},{
			"nav_list_url":"#nogo",
			"nav_list_name":"數據基礎應用"
		},{
			"nav_list_url":"#nogo",
			"nav_list_name":"性能監控"
		},{
			"nav_list_url":"#nogo",
			"nav_list_name":"運行環境"
		}]
};

handlebars會根據上下文來自動對錶達式進行匹配，若是匹配項是個變量，則會輸出變量的值，若是匹配項是個函數，則函數會被調用。

Handlebars.compile()方法來預編譯模板

var nav_template=Handlebars.compile($("#nav_template").html());
$(".nav-data-listin").html(nav_template(nav));

能夠用jquery的方式寫，也能夠用JS寫。

HandleBars還有其餘一些內置表達式

內建Helpers

with：切換上下文

each：循環輸出上下文中的內容，用this表達式指代單條內容，else表達式當上下文爲空時激活

if：條件表達式

unless：與if表達式功能相反

log：輸出log