Jquery 模板插件 jquery.tmpl.js 的使用方法(2):嵌套each循环,temp调用(使用预编译的模板缓存)

直接上代码吧

一：主窗口

/*#region SendChooseTargetTemplate 发送候选人主窗口模板*/
var SendChooseTargetTemplate = '';
SendChooseTargetTemplate += '<div id="hwsendChooseTarget_${UserId}"  style="display:block" class="content_body">';
SendChooseTargetTemplate += '        <div class="content">';
SendChooseTargetTemplate += '          <div class="top">';
SendChooseTargetTemplate += '            <a href="#" class="back"><img src="images/pic_18.png" width="18" height="14"></a>选择接收人';
SendChooseTargetTemplate += '          </div>';
SendChooseTargetTemplate += '         <div class="main">';
SendChooseTargetTemplate += '           <div class="received">';
SendChooseTargetTemplate += '              <div class="received_menus">';
SendChooseTargetTemplate += '                <ul id="tab3">';

SendChooseTargetTemplate += '{{each List}}';    //开始循环显示 班级名称    等同于  {{tmpl($data) \'SendChooseTargetCidsTemplate\'}}';  //记得前台页面要预编译这个模板缓存哦

SendChooseTargetTemplate += '  <a href="#"><li onclick="setTab(3,${$index })" {{if $index==0}} class="now"  {{/if}}>' +
                                '   <div class="checkbox" onclick="homeworkCheckbox(\'cc\',this);"></div>${Cname}</li> </a>';

SendChooseTargetTemplate += '{{/each}}';       //结束

SendChooseTargetTemplate += '                </ul>';
SendChooseTargetTemplate += '              </div>';
SendChooseTargetTemplate += '              <div class="received_list" id="tablist3">';
                                        //循环班级，并且显示每个班级里面的学生Sid列表 开始

SendChooseTargetTemplate += '           {{tmpl($data) \'SendChooseTargetSidsTemplate\'}}';  //将数据，绑定到 预编译的模板里面

                                            //循环班级，并且显示每个班级里面的学生Sid列表 开始
SendChooseTargetTemplate += '              </div>';
SendChooseTargetTemplate += '            </div>';
SendChooseTargetTemplate += '            <div class="input">';
SendChooseTargetTemplate += '              <div class="select">已选择${AlreadySelectCount}人</div>';
SendChooseTargetTemplate += '              <a href="javascript:DisplayTab(\'tag15\')" class="send">完成</a>';
SendChooseTargetTemplate += '            </div>';
SendChooseTargetTemplate += '          </div>';
SendChooseTargetTemplate += '        </div>';
SendChooseTargetTemplate += '      </div>';
SendChooseTargetTemplate += '';
/*#endregion*/

嵌套调用的模板

/*#region SendChooseTargetSidsTemplate 发送候选人主窗口模板===>每个班级下的Sid列表*/

var SendChooseTargetSidsTemplate = '{{each List}}';
SendChooseTargetSidsTemplate += '                <div class="tablist" style="display: {{if $index>0}}none{{else}}block{{/if}};">';
SendChooseTargetSidsTemplate += '                  <div class="row">';
SendChooseTargetSidsTemplate += '       {{each Students}}';
SendChooseTargetSidsTemplate += '                    <div class="rowcentent">';
SendChooseTargetSidsTemplate += '                      <a href="#"><img src="${Sphoto}" width="73" height="73"></a><p>${Sname}</p>';
SendChooseTargetSidsTemplate += '                      <div class="checkbox" onclick="myCheckbox(\'cc\',this);"></div>';
SendChooseTargetSidsTemplate += '                    </div>';
SendChooseTargetSidsTemplate += '       {{/each}}';

SendChooseTargetSidsTemplate += '                  </div>';
SendChooseTargetSidsTemplate += '                </div>';
SendChooseTargetSidsTemplate += '{{/each}}';

/*#endregion*/

二：前台html数据缓存，以及 模板预编译

 $(function () {
            var demodata =
            {
                UserId: 10895,
                AlreadySelectCount: 138,
                List:
                [
                    {
                        "Index": "0",
                        "Cid": "1",
                        "Cname": "101班",
                        "Check": "0",                           //   0表示1个都没有勾选  1表示至少勾选了1个  2表示全部勾选
                        "Cphoto": "images/ico/014.png",
                        "Students": [
                        {
                            "Sid": "s1",
                            "Sname": "周杰伦",
                            "Sphoto": "",               //这里可能没有图片，那么我们显示的时候，还要判断是否显示默认图片
                            "Check": "0"
                        },
                        {
                            "Sid": "s2",
                            "Sname": "李宇春",
                            "Sphoto": "images/ico/001.png",
                            "Check": "0"
                        }
                    ]
                    },
                    {
                        "Index": "1",
                        "Cid": "2",
                        "Cname": "102班",
                        "Check": "2",                       //0   0表示1个都没有勾选  1表示至少勾选了1个  2表示全部勾选
                        "Cphoto": "images/ico/014.png",
                        "Students": [
                        {
                            "Sid": "s201",
                            "Sname": "周笔畅",
                            "Sphoto": "images/ico/002.png",
                            "Check": "1"
                        },
                        {
                            "Sid": "s202",
                            "Sname": "存瑞",
                            "Sphoto": "images/ico/003.png",
                            "Check": "1"
                        }
                    ]
                    },
                    {
                        "Index": "2",
                        "Cid": "3",
                        "Cname": "103班",
                        "Check": "1",                           //0表示1个都没有勾选  1表示至少勾选了1个  2表示全部勾选
                        "Cphoto": "images/ico/014.png",
                        "Students": [
                    {
                        "Sid": "s301",
                        "Sname": "卡拉克",
                        "Sphoto": "images/ico/005.png",
                        "Check": "1"
                    },
                    {
                        "Sid": "s302",
                        "Sname": "刘德华",
                        "Sphoto": "images/ico/006.png",
                        "Check": "1"
                    },
                        {
                            "Sid": "s303",
                            "Sname": "菲比",
                            "Sphoto": "images/ico/007.png",
                            "Check": "1"
                        },
                        {
                            "Sid": "s304",
                            "Sname": "董瑞",
                            "Sphoto": "images/ico/008.png",
                            "Check": "0"
                        }
                    ]
                    }
                ]
            };
            //$.template("SendChooseTargetCidsTemplate", SendChooseTargetCidsTemplate);//班级列表
            $.template("SendChooseTargetSidsTemplate", SendChooseTargetSidsTemplate);//班级下的学生列表

            $.template("SendChooseTargetTemplate", SendChooseTargetTemplate);

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

        });      

 

重点就是如何在一个 模板里面，嵌套调用另外一个模板(还是用 temp 来调用)，如何传递数据 （使用data这个关键字）

参考网址 http://www.jb51.net/article/27747.htm