前端数据模板handlebars与jquery整合

最新推荐文章于 2023-09-11 11:09:14 发布

jackson61

最新推荐文章于 2023-09-11 11:09:14 发布

阅读量367

点赞数

文章标签：前端 jquery javascript

本文链接：https://blog.csdn.net/jackson61/article/details/127702739

版权

一、简介

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,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，内容如下：

<script id="stuTempId" type="text/x-handlebars-template">
    <section>
        <ul>
            {{#each stu}}
                <li>{{@index}}:{{@key}}:{{this}}</li>
            {{/each}}
        </ul>
    </section>
    <table border="1px">
        <tr><td>序号</td><td>学号</td><td>姓名</td><td>年龄</td><td>序号</td><td>姓名</td><td>年龄</td></tr>
        {{#each stus}}
            <tr>
                <td>{{@index}}</td>
                <td>{{id}}</td>
                <td>{{name}}</td>
                <td>{{#if age}}{{age}}{{else}}未填写{{/if}}</td>
                <td>{{@key}}</td>
                <td>{{this.name}}</td>
                <td>{{#with this}}{{age}}{{/with}}</td>
            </tr>
        {{/each}}
    </table>
</script>

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

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

以上完整的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>templateStudy</title>
    <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>

    <script id="stuTempId" type="text/x-handlebars-template">
        <section>
            <ul>
                {{#each stu}}
                    <li>{{@index}}:{{@key}}:{{this}}</li>
                {{/each}}
            </ul>
        </section>
        <table border="1px">
            <tr><td>序号</td><td>学号</td><td>姓名</td><td>年龄</td><td>序号</td><td>姓名</td><td>年龄</td></tr>
            {{#each stus}}
                <tr>
                    <td>{{@index}}</td>
                    <td>{{id}}</td>
                    <td>{{name}}</td>
                    <td>{{#if age}}{{age}}{{else}}未填写{{/if}}</td>
                    <td>{{@key}}</td>
                    <td>{{this.name}}</td>
                    <td>{{#with this}}{{age}}{{/with}}</td>
                </tr>
            {{/each}}
        </table>
    </script>
    <script type="text/javascript">
        $(function () {
            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}
            };
            $("#stuInfoId").empty().append($("#stuTempId").template(data).filter("*"));  //filter("*")用于匹配所有html节点，过滤掉文本节点
        });
    </script>
</head>
<body>
    <section id="stuInfoId"></section>
</body>
</html>