直接上代码吧

一:主窗口

/*#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

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

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

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

  2. jQuery滚动条插件 – jquery.slimscroll.js

    jquery.slimscroll.js插件是一个支持把内容放在一个盒子里面,固定一个高度,超出的则使用滚动.jquery.slimscroll.js不仅可以定义高度.宽度,还可以定义位置.滚动条大小 ...

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

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

  4. Jquery 分页插件 Jquery Pagination

    Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...

  5. JQuery模板插件-jquery.tmpl

    转载:https://www.cnblogs.com/whitewolf/archive/2011/10/09/2204185.html 在下面介绍一款jQuery的模板插件 tmpl,是由微软想jQ ...

  6. jQuery遮罩插件 jquery.blockUI.js

    Overview jQuery BlockUI 插件可以在不同锁定浏览器的同时,模拟同步模式下发起Ajax请求的行为.该插件激活时,会组织用户在页面进行的操作,直到插件被关闭.BlockUI通过向DO ...

  7. JQuery多媒体插件jQuery Media Plugin使用详解

    malsup jquery media plugin 该插件可以播放多种类型的多媒体文件包括:Flash, Quicktime, Windows Media Player, Real Player, ...

  8. jQuery国际化插件 jQuery.i18n.properties 【轻量级】

    jQuery.i18n.properties是一款轻量级的jQuery国际化插件,能实现Web前端的国际化. 国际化英文单词为:Internationalization,又称i18n,“i”为单词的第 ...

  9. cocos 3.16 生成预编译库模板

    打开模板功能 不知道什么原因,cocos 3.16关闭了模板功能,因此使用cocos -h命令时,无法显示gen-templates参数. 打开的方式也挺简单,打开tools/cocos2d-cons ...

随机推荐

  1. C# 延迟初始化

    一个对象的延迟初始化意味着该对象的创建将会延迟至第一次使用该对象时.(在本主题中,术语“延迟初始化”和“延迟实例化”是同义词.)延迟初始化主要用于提高性能,避免浪费计算,并减少程序内存要求. 以下是最 ...

  2. java 非法字符过滤 , 半角/全角替换

    java 非法字符过滤 , 半角/全角替换 package mjorcen.netty.test1; import java.io.UnsupportedEncodingException; publ ...

  3. angular入门系列教程3

    主题: 本篇主要目的就是继续完善home页,增加tab导航的三个页index index1 index2 效果图: 细节: 初始化的JS就是咱们的home.js,仔细来看. angular的route ...

  4. Java多线程——<二>将任务交给线程,线程声明及启动

    一.任务和线程 <thinking in java>中专门有一小节中对线程和任务两个概念进行了具体的区分,这也恰好说明任务和线程是有区别的. 正如前文所提到的,任务只是一段代码,一段要达成 ...

  5. java递归查询方法

    一.需求 项目里要让用户能够设置所选择教材的章课节,以针对章课节提供相应的题目供用户做题. 设计:用户设置了教材后,首次登录,进行章节设置时.默认为用户选择第一章.第一课.第一节. 思路:用户访问页面 ...

  6. 2-Highcharts曲线图之折线图

    示例图片,在网上下载一张图片如图:其中数据自定义 引入上节模版配置  在script标签中写代码:具体代码如下   信息将在代码中解释. 分析:“五省收益趋势”是标题: x坐标为[2011年-2016 ...

  7. 用NPOI导出Excel

    用NPOI导出Excel public void ProcessRequest(HttpContext context) { context.Response.ContentType = " ...

  8. 求和问题总结(leetcode 2Sum, 3Sum, 4Sum, K Sum)

    转自  http://tech-wonderland.net/blog/summary-of-ksum-problems.html 前言: 做过leetcode的人都知道, 里面有2sum, 3sum ...

  9. Matlab安装

    第一步:下载MATLAB 7.0,下载自己百度下就好. 三个ios文件 第二步:把每个IOS文件直接右键解压就好. 第三步:打开第一个解压文件夹.双击.exe文件 第四步:next之后把序列号黏贴上去 ...

  10. JsRender系列demo(3)-自定义容器

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...