前端模板引擎 - Handlebars

前端模板引擎 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>