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