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