Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

jquery.tmpl.js 是一个模板js  ,主要有2个方法

(1):$.template()方法，将一段script或者是Html编译为模板,例如 $.template('myTemplate', markup);  后者的markup一般是一段script脚本包围的变量名，或者是js里面的变量名，而前者的myTemplate则是指，我将markup编译为一个模板缓存，模板名称为myTemplate，如果我以后有需要在其他地方调用，则只用拿 myTemplate 即可，因为他已经在js的缓存里面了

(2):$('#myTemplate ).tmpl(userLangs).appendTo('#eachList');

        //模板               绑定      Json数据 添加到 指定的div或者是容器里面

 

一：基本使用方法演示  分4个步骤：(1)引入jquery和tmpl脚本 (2)开始写需要填充的模板和变量 (3)数据准备(4) 绑定模板

<!--引入脚本-->
    <script src="js/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.tmpl.js" type="text/javascript"></script>
    <!--开始写模板-->
    <script id="each" type="text/x-jquery-tmpl">
        <li>ID: ${ID}; Name: ${Name};<br />Langs:<ul>{{each Langs}}<li>${$index + 1}: <label>${$value}. </label></li>{{/each}}</ul></li>
    </script>
    <script type="text/javascript">
        $(function () {
            //这里是数据
            var userLangs = [
                {
                     ID: 'think8848', Name: 'Joseph Chan', Langs: ['Chinese', 'English']
                 },
                {
                     ID: 'aCloud', Name: 'Mary Cheung', Langs: ['Chinese', 'French']
                 }];
                   //模板   绑定    数据      添加到   指定的div或者是容器里面
                 $('#each').tmpl(userLangs).appendTo('#eachList');

             });
    </script>

然后我们在html页面里面，给一个容器，用于显示数据绑定之后添加到什么容器上，可以是div也可以是其他的，例如这里是ul

 

1:  <ul id="eachList">

2:  <!--这里是将要显示到的DIV层-->

3:  </ul>

4:  

 

显示结果

生成的html代码

 

二：高级一点的运用 

Ajax获取Json数据，并绑定,并且我们的模板，第一个 采用 script 包围的方式，第二个则直接采用 js变量

$(function () {
            $.ajax({
                type: "post",
                url: "handler/xxHandler.ashx",
                data: { classid: "12000001989", type: "getclassinfo" },
                dataType: "json",
                success: populate //如果ajax成功，则执行这个操作
            });
            function populate(data) {

                // 把模板标记，编译成[模板缓存]，起个名字叫  eachTemplate,方便我们以后在其他地方调用
                $.template("eachTemplate", each);
                //把缓存 加入 数据，然后添加到容器里面
                $.tmpl("eachTemplate", data).appendTo("#eachList");

                // 同一个数据，也能第二次利用
                $.template("hwTemplate", HomeWorkSendTemplate);
                //把缓存 加入 数据，然后添加到容器里面
                $.tmpl("hwTemplate", data).appendTo("#hwList");

            };
        });

后台 handler 获取参数，并且返回 序列化的 json 给前台脚本

模板方式一：使用script脚本包围的方式，注意，一定要加上一个 type="text/x-jquery-tmpl"

    <script id="each" type="text/x-jquery-tmpl">
//模板1 直接用script脚本包围的变量  注意后面一定要加type为 tmpl的特定值
        <li>班级Id: ${ClassId}; 班级名称: ${ClassName};<br />Langs:<ul>{{each Langs}}<li>${$index + 1}: <label>${$value}. </label></li>{{/each}}</ul></li>
    </script>

 

模板方式二，采用外部链接 js 脚本的方式，这种方式 不用自己在后面写 type="text/x-jquery-tmpl"

<script src="js/mytemplates.js" type="text/javascript"></script>

/* 模板二  直接在 其他的例如 mytemplate.js 里面写变量 即可 注意，要在自己的页面里面进行脚本引入 */
var HomeWorkSendTemplate = '<div id="hwsendmain_${ClassId}" class="content_body">';
HomeWorkSendTemplate += '<!--布置作业开始--><div id="tag15">';
HomeWorkSendTemplate += '       <div class="content">';
HomeWorkSendTemplate += '         <div class="top">布置作业</div>';

三：使用复杂的json格式展示数据

(1):准备好模板，这里我们是使用一个表格来展示，所以模板是用的tr来显示每一行的数据

<!—模板  直接用script脚本包围的变量  注意后面一定要加type为 tmpl的特定值-->
    <script id="classMuban" type="text/x-jquery-tmpl">
        <tr><td>${Cid}</td>

                        <td>${Cname}</td><td><ul>{{each Students}}
                        <li>序号${$index + 1}: <label>学生id:${$value.Sid}学生名称:${$value.Sname}
                             学生头像:{{if $value.Sphoto}}  

                                   <img src="${$value.Sphoto}" />
                                      {{else}}
                                       <img src="images/ico_01.png" title="这里是默认头像"/>
                                         {{/if}}
                            学生是否选中:${$value.Check}</label></li>{{/each}}</ul>

                   </td>

</tr>
    </script>

(2):准备数据，以及当文档加载完毕之后，执行绑定

//这里一定要加上，是在文档载入完成之后，才执行绑定模板的
        $(function () {
            var demodata = [{
                    "Cid": "1",
                    "Cname": "三年二班",
                    "Check": "0   0表示1个都没有勾选  1表示至少勾选了1个  2表示全部勾选",
                    "Cphoto": "班级图片地址",
                    "Students": [
                        {
                            "Sid": "s1",
                            "Sname": "周杰伦",
                            "Sphoto": "",  //这里可能没有图片，那么我们显示的时候，还要判断是否显示默认图片
                            "Check": "0表示没有勾选 1表示已经勾选"
                        },
                        {
                            "Sid": "s2",
                            "Sname": "李宇春",
                            "Sphoto": "http://pic.cnitblog.com/face/582230/20131114141342.png",
                            "Check": "0表示没有勾选 1表示已经勾选"
                        }
                    ]
                }
                , {
                    "Cid": "1",
                    "Cname": "三年四",
                    "Check": "0   0表示1个都没有勾选  1表示至少勾选了1个  2表示全部勾选",
                    "Cphoto": "班级图片地址",
                    "Students": [
                        {
                            "Sid": "s3",
                            "Sname": "周笔畅",
                            "Sphoto": "http://pic.cnitblog.com/face/572602/20131112163110.png",
                            "Check": "0表示没有勾选 1表示已经勾选"
                        },
                        {
                            "Sid": "s4",
                            "Sname": "董瑞",
                            "Sphoto": "http://pic.cnitblog.com/face/u119077.jpg",
                            "Check": "0表示没有勾选 1表示已经勾选"
                        }
                    ]
                }];

            //编译模板classMuban为一个变量名-> nameClassMuban  这样以后在其他地方，就可以方便调用 nameClassMuban了
            $.template("nameClassMuban", window.classMuban);

            //把模板缓存 加入 数据，然后添加到容器里面
            $.tmpl("nameClassMuban", demodata).appendTo("#showMyJson");
        }); 

(3):容器，这里为了显示方便，我们就用一个表格，并且第一行，我们自己已经给了。如果是实际项目中，一般都是DIV做容器

<table id="showMyJson" border="1">
            <tr>
                <td>&nbsp;班级Id</td>
                <td>&nbsp;班级名称</td>
                <td>&nbsp;班级学生</td>
            </tr>
        </table>

最后我们来看看效果如何

代码生成如下