Handlebars.js 模板引擎

前言：現在感覺學東西，總喜歡追求，技術出現的背景，爲什麼用？怎麼用？有什麼優點？不過感覺這樣的心態也是技術進步的動力

---

爲什麼要用handlebars模版

           模板引擎 
模板 + 數據 ========> html頁面 

1. view 和 data分離，能夠有能力高效地容易地創立語義化的模版。
2. 加載預編譯，保持模塊加載和運行速度。
3. 如果服務器端渲染模版的話，填充數據，可以減少回填數據給頁面的ajax請求，提升瀏覽器端整體頁面渲染速度。

handlebars的安裝

handlebars是一個純JS庫,在npm上也有包

    1、npm install --save handlebars
    2、app.set('view engine', 'hbs');

基本使用語法：

1、使用方法:
    兩個花括號{{value}},   
    handlebars模板會自動匹配相應的數值，對象中的屬性甚至是函數的結果。

    <div class="entry">
      <h1>{{title}}</h1>
      <div class="body">
        {{body}}
      </div>
    </div>
    而我採用的是node的exporess框架，模版引擎設置  
    app.set(engine,'hbs');
    模版接受的表達式的值，來源於res.render('文件名',option)的option以及res.locals這個對象。模版會自動匹配對應的值。

2、html片段轉義:
使用方法：三個花括號{{html片段}},   

    title = '<p>post about &lt;p&gt; tags</p>'
    模版 =>  <div class="entry">
              <h1>{{title}}</h1>
            </div>
    模版引擎轉義 => <div class="entry">
                      <h1>
                      <p>post about &lt;p&gt; tags</p></h1>
                </div>

handlebars的表達式

1、Block表達式使用方法：{{#表達式}} {{/表達式}}

    <ul>  
        {{#programme}} //數組
            <li>{{language}}</li> //item
        {{/programme}}
    </ul> 

2、內置塊表達式使用方法：
        {{#each}} 遍歷列表塊內容  
        用this來引用遍歷的元素

    <ul>  
        {{#each name}}
            <li>{{this}}</li>
        {{/each}}
    </ul> 

3、if else 
    {{#if}}件渲染DOM

    {{#if list}}
        <ul id="list">  
            {{#each list}}
                <li>{{this}}</li>
            {{/each}}
        </ul>  
        {{else}}
            <p>{{error}}</p>
    {{/if}}