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}}