前端模板引擎 Handlebars
后缀名
Handlebars的后缀有两种,全称的handlebars以及简称的hbs
index.handlebars
index.hbs
前提表达式 #if
前提为
真
时,才实行
// 待衬着数据
var json={
city:"上海",
users:[{username:"tom"},{username:"kity"},{username:"marry"}]
}
<!--模板片断-->
{{#if users.length }}
<p>{{@index}} - {{username}} - {{./username}} - {{this/name}} - {{this.name}}</p>
{{/if}}
{{#if isActive}}
<img src="star.gif" alt="Active">
{{else}}
<img src="cry.gif" alt="Inactive">
{{/if}}
<!--
./ :示意当前作用域
../:示意上一级作用域
-->
前提表达式 #unless
前提为
假
时,才实行
{{#unless license}}
<h3 class="warning">WARNING: This entry does not have a license!</h3>
{{/unless}}
途径
./ :示意当前作用域
../:示意上一级作用域
块
在handlebars中每个#都代表一个“块”,每个块都是一个自力的作用域局限
// 数据
hehe: { words: 'hehehehe' }
yoyo: { words: 'yoyoyoyo'}
<!--对应的模板-->
{{#hehe}}
<p>{{words}}</p>
{{/hehe}}
{{#yoyo}}
<p>{{words}}</p>
{{/yoyo}}
轮回
{{#each student}}
<tr>
<td>{{name}}-{{this.name}}-{{./name}}-{{this/name}}</td>
<td>{{sex}}-{{this.sex}}-{{./sex}}-{{this/sex}}</td>
<td>{{age}}-{{this.age}}-{{./age}}-{{this/age}}</td>
</tr>
{{/each}}
<!--假如传入的是array则直接运用this替代数组-->
{{#each this}}
<li>{{@index}}--{{name}}</li>
{{/each}}
</ul>
引入子模板
<div class="home">
{{> ../../component/header/header}}
<h2>this is {{name}} page</h2>
{{> ../../component/footer/footer}}
</div>
HTML编码
var json={msg:"<b>This is msg.</b>"}
<!--转义-->
<p>{{json}}</p>
<!--不转义-->
<p>{{{json}}}</p>
helper
//注册一个比较大小的Helper,推断v1是不是大于v2
Handlebars.registerHelper("compare",function(v1,v2,options){
if(v1>v2){
//满足增加继承实行
return options.fn(this);
}else{
//不满足前提实行{{else}}部份
return options.inverse(this);
}
});
//注册一个翻译用的Helper,0翻译成男,1翻译成女
Handlebars.registerHelper("transformat",function(value){
if(value==0){
return "男";
}else if(value==1){
return "女";
}
});
{{#compare age 20}}
<tr>
<td>{{name}}</td>
<td>{{transformat sex}}</td>
<td>{{age}}</td>
</tr>
{{else}}
<tr>
<td>?</td>
<td>?</td>
<td>?</td>
</tr>
{{/compare}}
解释
<div class="entry">
{{! 这个解释不会衬着到输出效果中 }}
<!-- 这类解释会显现 -->
</div>