//这里一定要加上,是在文档载入完成之后,才执行绑定模板的
$(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");
});
<!—模板 直接用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>
<table id="showMyJson" border="1">
<tr>
<td> 班级Id</td>
<td> 班级名称</td>
<td> 班级学生</td>
</tr>
</table>