前端数据模板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插件包，如下：

<script src="../lib/js/jquery-3.0.0.js"></script>
<script src="../lib/js/handlebars-v4.0.10.js"></script>
<script src="../lib/js/handlebars-jquery.js"></script>

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

var data={
    stus:[
        {
 id:100