是一个javascript的语义模板库，是一个纯js库 什么都不依赖

先引库

通过script标签载入模板

script的标签上要写 type='text/x-handlebars-template'  id='td1'

1. 下载Handlebars

2. 引入Handlebars

3. 创建模板

4. 在JS代码中编译模板

Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。

handlebars是一款jquery插件，[ The Write Less, Do More ]，是中小型快速建站的极好选择。

Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。
handlebars是一款jquery插件，[ The Write Less, Do More ]，是中小型快速建站的极好选择。

一. 为什么要使用模板引擎

关于为什么要使用模板引擎, 就我现在的项目而言,我还停留在进行发送Ajax请求到后台后,利用模板引擎拼接接受到的JSON字符串,展现到页面的地步. 按照我老师的一句话表达:不用重复制造轮子. 对于为什么要使用模板引擎的解释,我看过最好的回答来自知乎上niko的回答:

模板最本质的作用是**【变静为动】一切利用这方面的都是优势，不利于的都是劣势。要很好地实现【变静为动】的目的，有这么几点：
1. 可维护性（后期改起来方便）；
2. 可扩展性（想要增加功能，增加需求方便）；
3.开发效率提高（程序逻辑组织更好，调试方便）；
4.看起来舒服（不容易写错）；
从以上四点，你仔细想想，前端模板是不是无论从哪方便优势体现都不是一点两点。其实最重要的一点就是：【视图（包括展示渲染逻辑）与程序逻辑的分离】**分离的好处太多了，更好改了，更好加东西了，调试也方便了，看起来也舒服了，应用优秀的开发模式更方便了（mvvc，mvc等）.

二. 选择Handlebars的原因

1. 全球最受欢迎的模板引擎

Handlebars是全球使用率最高的模板引擎,所以当之无愧是全球最受欢迎的模板引擎.Handlebars在许多前端框架中都被引入,比如在MUI和AmazeUI等框架,都推荐使用Handlebars.以AmazeUI为例,AmazeUI的文档中专门为Web组件提供了其Handlebars的编译模板

Amaze UI 提供的开发模板中，包含一个 widget.html 文件，里面展示了 Widget 在纯浏览器环境中的使用。

要点如下：1.引入 Handlebars 模板 handlebars.min.js；2.引入 Amaze UI Widget helper amui.widget.helper.js；3.根据需求编写模板 [removed]{{>slider slider}}[removed]；4.传入数据，编译模板并插入页面中。

$(function() {
  var $tpl = $('#amz-tpl');
  var source = $tpl.text();
  var template = Handlebars.compile(source);
  var data = {};
  var html = template(data);

  $tpl.before(html);});

2. 语法简单

Handlebars的基本语法极其简单,使用{{value}}将数据包装起来即可,Handlebars会自动匹配响应的数值和对象.以下是一个最简单的模板:

    
{{name}}
    
{{content}}

三.如何使用Handlebars

1. 下载Handlebars

• 通过Handlebars官网下载:http://handlebarsjs.com./installation.html

• 通过npm下载:npm install --save handlebars

• 通过bower下载:bower install --save handlebars

• 通过Github下载:https://github.com/daaain/Handlebars.git

• 通过CDN引入:https://cdnjs.com/libraries/handlebars.js

2. 引入Handlebars

通过[removed]标签引入即可,和引入jQuery库类似:

[removed][removed]

3. 创建模板

• 步骤一: 通过一个[removed]将需要的模板包裹起来

• 步骤二: 在[removed]标签中填入type和id

• type类型可以是除text/javascript以外的任何MIME类型,但推荐使用type="text/template",更加语义化

• id是在后面进行编译的时候所使用,让其编译的代码找到该模板.

• 步骤三: 在[removed]标签中插入我们需要的html代码,根据后台给我们的接口文档,修改其需要动态获取的内容

[removed]
    

        
{{name}}
        
{{content}}
    
[removed]

4. 在JS代码中编译模板

//用jQuery获取模板var tpl   =  $("#myTemplate").html();//预编译模板var template = Handlebars.compile(tpl);//匹配json内容var html = template(data);//输入模板$('#box').html(html);

以上述代码为例进行解释:

• 步骤一: 获取模板的内容放入到tpl中,这里$("#myTemplate")中填入的内容为你在上一步创建模板中所用的id.

• 提醒: 这里我使用的jQuery的选择器获取,当然,你可以使用原生javascript的DOM选择器获取,例如:docuemnt.getElementById('myTemplate')和document.querySelector('#myTemplate')

• 步骤二: 使用Handlebars.compile()方法进行预编译,该方法传入的参数即为获取到的模板

• 步骤三: 使用template()方法进行编译后得到拼接好的字符串,该方法传入的参数即为上一步预编译的模板.

• 步骤四: 将编译好的字符串插入到你所希望插入到的html文档中的位置,这里使用的是jQuery给我们提供的html()方法.同样,你也可以使用原生的innerHTML

四.案例演示

以下面的慢慢买网站为例,该项目中的手机列表,是通过Ajax动态获取的,我们不可能在html文档中写入全部的手机列表代码,这是不可能的.所以我们需要通过Handlebars来帮我们将后台传递过来的数据动态的显示到html文档中.

慢慢卖的项目

1. 在HTML中引入:Handlebars,jQuery和本页的Js代码

[removed][removed] //Handlebars[removed][removed] //jQuery[removed][removed]  //本页的Js代码

2. 创建模板

在未插入模板的情况下,页面显示如下,现在我们来使用Handlebars让数据动态的显示在网页上.

未使用Handlebars的页面

    [removed]
        {{#each result}} 
        

            
                

                    {{{productImg}}}
                
                

                    

                        {{productName}}
                    
                    
{{productPrice}}
                
                

                    {{productQuote}}
                    {{productCom}}
                
            
        
        {{/each}}
    [removed]

以上模板中的{{#}}为Handlebars的helper语法,可以实现Javascript中的逻辑和循环运算.更多使用方法可以参考: http://www.ghostchina.com/introducing-the-handlebars-js-templating-engine/

3. 在JS代码中编译模板

//定义getList()函数来发送Ajax请求,传递的参数为后台给的接口文档中定义的参数function getList(categoryId,pageid){
    //调用jQuery的Ajax()方法来发送Ajax请求
    $.ajax({
        type:'get',
        url:'http://182.254.146.100:3000/api/getproductlist',
        data:{
            pageid:pageid||1,
            categoryid:categoryId        },
        success:function(data){
            //用zepto获取模板
            var tpl   =  $("#product-list-tepl").html();
            //预编译模板
            var template = Handlebars.compile(tpl);
            //匹配json内容
            var html = template(data);
            //插入模板,到ul中
            $('.product-list ul').html(html);
        }
    })}//入口函数$(function(){
    //获取到查询字符串的id
    var categoryId = Number(GetQueryString("categoryid"));  //getQueryString()是获取上一步传递过来的查询字符串的方法
    //调用定义的getList()获取手机列表
    getList(categoryId);})//获取上一步传递过来的查询字符串的方法function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = [removed].search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;}

4. 插入模板后的页面如下

使用Handlebars后的页面

通过上面的案例,我相信大家应该能够明白模板引擎的强大,我们只需要在页面中写好一个手机列表的HTML代码,即可动态获取后台传递过来的所有信息,从而在页面中进行展示.

注意: 在实际开发中,我们通过Ajax发送请求时所需要传递的参数,和获取到的JSON或其他格式的数据.皆是需要通过后台给定的接口文档为准.

是一个javascript的语义模板库，是一个纯js库 什么都不依赖

先引库

通过script标签载入模板

script的标签上要写 type='text/x-handlebars-template'  id='td1'

1. 下载Handlebars

2. 引入Handlebars

3. 创建模板

4. 在JS代码中编译模板