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