前端数据模板handlebars与jquery整合

一、简介

handlebars是前端数据模板，在此介绍handlebars主要指令，以及与jquery整合的开发流程。

二、handlebars主要指令

handlebars中的指令与数据变量，都以两个大括号（即{{和}}）包围，指令以#开始，以/结尾。

1、循环指令#each

可遍历对象和数组，遍历中或获取的数据有：

a)@index  ,遍历过程当前元素的索引;

b)@key ,遍历过程中，当前元素的名称（或数组元素的索引）

c)this ,遍历过程中，当前元素的值；

2、条件判断指令#if和#unless

a)#if /else，当if内的数据有且不为null时，返回true；

b)#unless，与指令相反 

3、上下文指令#with

为模板的一块区域定义上下文

三、handlebars与jquery整合的开发流程

1、编写handlebars的jquery插件handlebars-jquery.js ，内容如下：

(function($){
    var compiled = {};
    $.fn.template = function(data){
        var template = $.trim($(this).first().html());
        if(compiled[template] == undefined){
            compiled[template]=Handlebars.compile(template);
        }
        return $(compiled[template](data));
    };
})(jQuery)

2、在页面引入jquery包、handlebars包、handlebars的jquery插件包，如下：

3、编写数据（实际使用中，可通过ajax从后台获取数据），内容如下：

var data={
    stus:[
        {id:100,name:"apple1",age:11},
        {id:200,name:"apple2"},
        {id:300,name:"apple3",age:33},
    ],
    stu:{id:300,name:"apple3",age:33}
};

4、编写数据模板（注意:script标签的type类型为text/x-handlebars-template，内容如下：

5、将数据绑定到模板上，并在页面展示，如：

$("#stuInfoId").empty().append($("#stuTempId").template(data).filter("*"));  //filter("*")用于匹配所有html节点，过滤掉文本节点

以上完整的代码如下：

html>
lang="en">

    charset="UTF-8">
    
    
    
    

    
    


    
id="stuInfoId">

输出：

• 0:id:300
• 1:name:apple3
• 2:age:33

序号	学号	姓名	年龄	序号	姓名	年龄
0	100	apple1	11	0	apple1	11
1	200	apple2	未填写	1	apple2
2	300	apple3	33	2	apple3	33