Node.js模板引擎（Hanldlebars）

#####Handlebars

• 是基于jQuery的插件，以json对象为数据源，支持逻辑判断，循环操做等。
• 60k左右。
• 采用Logic-less template（无逻辑模板），加载时被预编译，而不是到了客户端执行代码时再去编译。
• 能够兼容Mustache。
• express默认的模板引擎不包含Handlebars。
• {{htmlContext}}至关于EJS中的<%- htmlContext>，{{textContext}}至关于ejs中的<%=textContext>。
• {{#each @index}}{{/each}}中的@index至关于当前遍历的索引。

package.json中引入。

"express-handlebars": "*"

安装

npm install express-handlebars

使用

var exphbs = require("express-handlebars");
app.set('hbs',exphbs({
    layoutsDir:'views',
    defaultLayout:'layout',
    extname:'.hbs'
}));
//每次渲染时都会结合layout.hbs渲染，如不须要则
/*
res.render('404',{
    layout:false
});*/
app.set('view engine','hbs');

浏览器中渲染

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody id="tableList">         
  </tbody>
</table>
<script type="text/javascript" src="script/jquery.js"></script>
<script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script>
<script id="table-template" type="text/x-handlebars-template">
  <!--循环中使用this-->
  {{#each student}}
    <tr>
      <td>{{name}}<td>
      <td>{{sex}}<td>
      <td>{{age}}<td>
      <td>
         {{#with favorite}}
           {{#each this}}
             <p>{{name}}</p>
           {{/each}}
         {{/with}}
       </td>
    </tr>
  {{each}}
<!--with进入到某个属性-->
{{#each this}}
    <tr>
      <td>{{name}}<td>
      <td>{{sex}}<td>
      <td>{{age}}<td>
      <td>
         {{#with favorite}}
           {{#each this}}
             <p>{{name}}</p>
           {{/each}}
         {{/with}}
       </td>
    </tr>
  {{each}}
<!--with-终极this应用-->
{{#each this}}
    <tr>
      <td>{{name}}<td>
      <td>{{sex}}<td>
      <td>{{age}}<td>
      <td>
         {{#with favorite}}
           {{#each this}}
             <p>{{this}}</p>
           {{/each}}
         {{/with}}
       </td>
    </tr>
  {{each}}
  <!--演示registerHelper的用法-->
  {{#each student}}
     {{#if name}}
       {{#compare age 20}}
         <tr>
           <td>{{name}}</td>
           <td>{{sex}}</td>
           <td>{{age}}</td>
         </tr>
     {{else}}
         <tr>
           <td>?</td>
           <td>?</td>
           <td>?</td>
         </tr>
       {{/compare}}
     {{/if}}
  {{/each}}
  <!--演示registerHelper的另外一种用法-->
  {{#each student}}
     {{#if name}}
       {{#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}}
     {{/if}}
  {{/each}}
</script>

//<!--进行数据处理、html构造-->
//<script type="text/javascript">
  $(document).ready(function() {
    //模拟的json对象
    var data_each = {
      "student": [
        {
          "name": "张三",
          "sex": "0",
          "age": 18
        },
        {
          "name": "李四",
          "sex": "0",
          "age": 22
        },
        {
          "name": "妞妞",
          "sex": "1",
          "age": 18
        }
      ]
    };
    var data_this = [
      {
        "name": "张三",
        "sex": "0",
        "age": 18
      },
      {
        "name": "李四",
        "sex": "0",
        "age": 22
      },
      {
        "name": "妞妞",
        "sex": "1",
        "age": 18
      }
    ];
    var data_with = [
      {
        "name": "张三",
        "sex": "0",
        "age": 18,
        "favorite":
        [
          {
            "name":"唱歌"
          },{
            "name":"篮球"
          }
        ]
      },
      {
        "name": "李四",
        "sex": "0",
        "age": 22,
        "favorite":
        [
          {
            "name":"上网"
          },{
            "name":"足球"
          }
        ]
      },
      {
        "name": "妞妞",
        "sex": "1",
        "age": 18,
        "favorite":
        [
          {
            "name":"电影"
          },{
            "name":"旅游"
          }
        ]
      }
   ];
   var data_with_this = [
     {
       "name": "张三",
       "sex": "0",
       "age": 18,
       "favorite":
       [
         "唱歌",
         "篮球"
       ]
     },
     {
       "name": "李四",
       "sex": "0",
       "age": 22,
       "favorite":
       [
         "上网",
         "足球"
       ]
     },
     {
       "name": "妞妞",
       "sex": "1",
       "age": 18,
       "favorite":
       [
         "电影",
         "旅游"
       ]
     }
   ];
   //注册一个Handlebars模版，经过id找到某一个模版，获取模版的html框架
   var myTemplate = Handlebars.compile($("#table-template").html());
   Handlebars.registerHelper("compare",function(v1,v2,options){
     if(v1>v2){
       //知足添加继续执行
       return options.fn(this);
     }else{
       //不知足条件执行{{else}}部分
       return options.inverse(this);
     }
   }); 
   //带options参数的Helper是块级别的，不带就是行内级别的Helper
   Handlebars.registerHelper("transformat",function(value){
      if(value==0){
         return "男";
      }else if(value==1){
        return "女";
      }
   });  
   //将json对象用刚刚注册的Handlebars模版封装，获得最终的html，插入到基础table中。
   $('#tableList').html(myTemplate(data));
});
//</script>

if 判断时返回为undefined、null、""、[]、false任意一个均为假，{{}}内容都会被解析，不解析的能够用{{{}}}