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任意一個均爲假，{{}}內容都會被解析，不解析的能夠用{{{}}}