Handlebars的使用

Handlebars模版

Handlebars模板是一个JavaScript模板引擎，有些类似与Mustache、Underscore Templates、Embedded JS Templates、Jade templating等模版，但是他们都各有各的特点。

Mustache模板和 Handlebars是兼容的
逻辑处理由Handlebars的Helper进行
无依赖

开始使用

1、视图-用来展示数据

<div id="wrap"></div>
<script id="template" type="text/x-handlebars-template">
<h2>{{title}}</h2>
<ul>
	{{#each peoples}}
		<li>姓名：{{name}}-------描述:{{des}}</li>
	{{/each}}
</ul>
</script>
<script type="text/javascript" src="handlebars.js"></script>

2、脚本-处理数据

var data = {
	title:'游戏人物名单',
	peoples:[
		{name:'奥巴马',des:'攻击力<b>10</b>万点伤害',age:'100',money:'25'},
		{name:'毛主席',des:'攻击力1.5万点伤害',age:'80',money:'36'},
		{name:'如来',des:'攻击力0.3万点伤害',age:'60',money:'39'},
		{name:'卡卡西',des:'攻击力8万点伤害',age:'80'},
		{name:'曹操',des:'攻击力80万点伤害',age:'45'},
		{name:'诸葛亮',des:'攻击力100万点伤害',age:'90'},
		{name:'貂禅',des:'攻击力60万点伤害',age:'89'}
	],
	tag:['刺客','隐士','策士','术士'],
	country:{
		areaFisrt:'吴国',
		areaSecond:'秦国',
		areaThird:'楚国',
	}
};
var wrap = document.getElementById('wrap'),
    tpl = document.getElementById('template');
var source = tpl.innerHTML;
var template = Handlebars.compile(source);
var str = template(data);
wrap.innerHTML = str;

3、UI-结果

基本语法

1、数据传进去handlebars会自动进行匹配，相应的数值，对象甚至是函数。例如：

1 2	<h2>{{title}}</h2> <div>{{peoples}}</div>

2、下面这个东西不能忘：

1	type="text/x-handlebars-template"

3、找到不到匹配项，则没有输出，支持点操作符
4、使用Handlebars.compile()方法预编译模板
5、用jquery获取模板

1	var tpl = $("#template").html();

Block表达式

表达式后面跟随一个#号来表示Blocks，然后通过双花括号里面添加反斜杠和表达式来结束Blocks,如果表达式是数组则自动展开，上面循环部分改写如下：

1
2
3

{{#peoples}}//开始
    <li>姓名：{{namex}}-------描述:{{des}}</li>
{{/peoples}}//结束

each block helper

遍历块内容，用this来引用元素,用上边的部分数据，如下：

1
2
3

{{#each tag}}
    <li>{{this}}</li>
{{/each}}

if else block helper

if判断和使用js一样,参数返回false，undefined, null, “” 或者 [],Handlebar将不会执行里面的内容，如果有else则执行else操作，如下：

{{#each tag}}
	{{#if this}}
		<li>{{this}}</li>
	{{else}}
		<li>没有值</li>
	{{/if}}
{{/each}}

unless block helper

unless则与if相反,值为false时执行内容，如下

{{#each tag}}
	{{#unless this}}
		<li>{{this}}</li>
	{{else}}
		<li>没有值</li>
	{{/unless}}
{{/each}}

with block helper

with可以进行上下文传递，和赋值，如下

{{#with country}}
	<div>{{areaFisrt}}</div>
	<div>{{areaSecond}}</div>
	<div>{{areaThird}}</div>
{{/with}}

Handlebar的注释如下

1 2	{{! 我是注释 }} {{!-- 我是注释 --}}

路径访问

{{#with country}}
	<div>{{../title}}</div>
{{/with}}

{{country.areaFisrt}}

自定义helper

可以使用Handlebars.registerHelper()方法来注册一个helper,如下：

//使用一
{{confName name}} //视图

Handlebars.registerHelper("confName", function(name) {
	return "大"+name;
});

//使用二
{{#filter age money}}//视图
	<li>姓名：{{confName name}}-------描述:{{des}}</li>
{{/filter}}

Handlebars.registerHelper("filter", function(age, money,options) {
	if (age && money) {
		return options.fn(this);
	}
});

字符串进行编码Handlebars.SafeString

Handlebars.SafeString 对字符串不编码
new Handlebars.SafeString(result)进行编码

{des:'攻击力<b>10</b>万点伤害'} //原始数据

使用一:
{{des}} //页面输出：攻击力<b>10</b>万点伤害

使用二：

{{confDes des}} //视图

或者：
Handlebars.registerHelper("confDes", function() {
	var emotion = Handlebars.escapeExpression(this.des);
	return emotion; //页面输出：攻击力&lt;b&gt;10&lt;/b&gt;万点伤害
});

或者：
Handlebars.registerHelper("confDes", function() {
	var emotion = Handlebars.escapeExpression(this.des);
	return new Handlebars.SafeString(emotion); //页面输出：攻击力<b>10</b>万点伤害
});

或者：
数字10已加粗
Handlebars.registerHelper("confDes", function() {
	return new Handlebars.SafeString(this.des);//页面输出：攻击力10万点伤害
});

log helper

log输出信息

1	{{log "正确"}}

后语

基本用法就这些,具体还是应该已官网为表准。

某人