直接上代码吧

一:主窗口

/*#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="data: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 οnclick="setTab(3,${$index })" {{if $index==0}} class="now"  {{/if}}>' +'   <div class="checkbox" οnclick="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" οnclick="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

转载于:https://www.cnblogs.com/joeylee/p/3459945.html

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

  1. JQuery模板插件jquery.tmpl-动态ajax扩展

    在上一篇JQuery模板插件-jquery.tmpl中介绍了这款插件.有时我们需要去动态的ajax去加载模板,或者数据,根据url参数或者其他信息加载不同的模板,数据.在我的某个项目中有这个需求,所以 ...

  2. jQuery分页插件(jquery.page.js)的使用

    效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件--jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <link re ...

  3. SlidesJS基本使用方法和官方文档解释 【Jquery幻灯片插件 Jquery相册插件】

    SlidesJS基本使用方法和官方文档解释 [Jquery幻灯片插件 Jquery相册插件] 标签: jquery文档functionstringdiv相册 2012-04-19 15:23 3931 ...

  4. js遍历树,多层嵌套for循环,递归

    js遍历树,多层嵌套for循环,递归 一.目的 源数据示例 二.如何获得数据 多层for循环嵌套遍历树数据 递归遍历树数据 一.目的 遍历获取树数据中的部分数据. 源数据示例 menuType=2的数 ...

  5. jQuery遮罩插件jQuery.blockUI.js简介

    概述: jQuery BlockUI插件可以在不锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会阻止用户在页面进行的操作,直到插件被关闭.BlockUI通过向DOM中添加元素实 ...

  6. jquery 滚轮插件 jquery.mousewheel.js

    jquery.mousewheel插件使用 jquery中没有鼠标滚轮事件,那么可以使用jquery的滚轮事件插件jquery.mousewheel.js. Github地址:jquery-mouse ...

  7. jQuery validate插件submitHandler提交导致死循环解决方法

    作者:海底苍鹰 地址:http://blog.51yip.com/jsjquery/1511.html dom对像的提交form.submit();和jquery对像的提交$('').submit() ...

  8. html面板插件ui,jQuery布局插件UI Layout简介及使用方法

    UI Layout是一种基于jQuery的布局框架,项目主页http://layout.jquery-dev.net/.该框架的参考原型是ExtJS的border-layout,因此十分适用于将原有使 ...

  9. 一款很好用的Jquery 打印插件——jQuery.print.js

    https://blog.csdn.net/JodenHe/article/details/70313604?locationNum=3&fps=1 登录网址https://github.co ...

最新文章

  1. 机器学习中的数据标准化
  2. python中文读音ndarray-Python Numpy 控制台完全输出ndarray的实现
  3. (转) Java多线程同步与异步
  4. 51单片机c语言乘法,求一个 89C51 简易计算器的c语言程序 只要加减乘除就行!
  5. C#程序中设置全局代理(Global Proxy)
  6. VMM2012应用指南之12- 创建自助服务用户并分配云
  7. 微信小程序种利用轮播图实现tab栏切换
  8. java.lang.NoSuchMethodError: javax.servlet.ServletContext.getVirtualServerName()Ljava/lang/String
  9. 安装zabbix服务器端
  10. espcms简约版的表单,提示页,搜索列表页
  11. 爬取豆瓣网电视剧数据(共1500条)
  12. Django项目部署到腾讯云服务器
  13. cloud2声卡_【箴言】带你解惑HyperX Cloud2(飓风)和Alpha(阿尔法)的终极选择
  14. 关于施耐德PLC下载程序错误出现“断言失败:‘Abort=Quit,Retry=Debug,lgnore=Continue’”
  15. 【记录一些名人博客地址】
  16. 行内元素之间产生的间隙
  17. 几个超赞的颜色搭配网站,非常实用!强烈推荐!!
  18. 英语--定语从句疑难解答
  19. uniapp开发app真机调试连接电脑服务器请求失败解决方法
  20. SQL:DBMS函数的差异(限制输出结果、拼接字段)

热门文章

  1. Visual Studio Code中比较不同的分支(How to compare different branches in Visual Studio Code)
  2. STM32_iC-MHM磁编码器使用
  3. Jetson Xavier NX学习笔记(三)系统烧录+开机教程+YOLOv7环境搭建+错误总结(详细版)
  4. Android Studio下拉菜单
  5. linux mint回收站,Autotrash:定时自动删除旧垃圾的命令行工具
  6. php正则表达式后向引用和贪婪模式
  7. LeetCode——706,设计哈希映射
  8. linux 定制自己的开机logo
  9. 【Vue基础七】--- 组件和模块概念
  10. 【JDK下载与安装教程】