前端模板引擎 Handlebars

参考1

参考2

参考3

后缀名

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>