前端数据模板handlebars与jquery整合

来源：互联网发布：家具淘宝店名大全编辑：程序博客网时间：2024/06/16 10:02

一、简介

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>

输出：

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

序号学号姓名年龄序号姓名年龄0100apple1110apple1111200apple2未填写1apple2 2300apple3332apple333

阅读全文

0 0