JsRender系列demo-对null 和boolen类型数据的探讨
废话不说了,直接上代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/jquery-ui.js"></script>
<script type="text/javascript" src="scripts/jsrender.js"></script>
<link href="scripts/demos.css" rel="stylesheet" />
<link href="scripts/movielist.css" rel="stylesheet" />
</head>
<body>
<script type="text/html" id="userinfoTemplate">
{{for Items}}
<tr><td>{{:name}}</td><td>{{:Age}}</td><td>{{:IsOpen?'结婚':'未婚'}}</td></tr>
{{/for}}
<tr>
</tr>
</script>
<table>
<thead>
<tr>
<th>Title</th>
<th>Languages</th> </tr>
</thead>
<tbody id="movieList"></tbody>
</table>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>婚否</th>
</tr>
</thead>
<tbody id="userInfo"></tbody>
</table>
</body>
</html>
<script type="text/javascript">
$(function () {
var data = {
DataCount: 138,
PageIndex: 2,
PageCount: 3,
Items: [
{ name: "刘建伟", Age: 12, IsOpen: false },
{ name: "小全", Age: 13, IsOpen: true },
{ name: "小刚", Age: 14, IsOpen: false },
{ name: "撞墙", Age: null, IsOpen: false },
{ name: null, Age: 15, IsOpen: true },
{ name: "小娥", Age: 16, IsOpen: false },
{ name: "小娜", Age: 17, IsOpen: false },
]
};
$("#userInfo").html($("#userinfoTemplate").render(data));
});
</script>
结果显示:
JsRender系列demo-对null 和boolen类型数据的探讨的更多相关文章
- JsRender系列demo(7)compline
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.j ...
- JsRender系列demo(9)自定义函数
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JsRender系列demo(6)-无名
<!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.j ...
- JsRender系列demo(5) for else
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JsRender系列demo(4)-if else
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JsRender系列demo(3)-自定义容器
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JsRender系列demo(2)多模板-template
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- JsRender系列demo(1)-insert-data
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- Struts2+Jquery实现ajax并返回json类型数据
来源于:http://my.oschina.net/simpleton/blog/139212 摘要 主要实现步骤如下: 1.JSP页面使用脚本代码执行ajax请求 2.Action中查询出需要返回的 ...
随机推荐
- unity基本操作二
一:error1,先断网再启动点击Manual Activation点击Save License生成相应的alf文件2,联网打开https://license.unity3d.com/manual上传 ...
- Cadence OrCad Allegro SPB 16.6 下载及安装破解指南
Cadence公司的电子设计自动化产品涵盖了电子设计的整个流程,包括系统级设计,功能验证,IC综合及布局布线,模拟.混合信号及射频IC设计,全定制集成电路设计,IC物理验证,PCB设计和硬件仿真建模等 ...
- FTP 数字代码的意义
110 重新启动标记应答. 120 服务在多久时间内ready. 125 数据链路埠开启,准备传送. 150 文件状态正常,开启数据连接端口. 200 命令执行成功. 202 命令执行失败. 211 ...
- Ubuntu 14.04下java开发环境的搭建--3--Tomcat及MySQL的安装
前面两篇文章,已经说明了JDK和Eclipse 的安装方法,下面简单说一下,Tomcat及MySQL的安装方法. Tomcat的安装. 在合适的地方解压apache-tomcat-6.0.39.tar ...
- ASP.Net网站部署失败
部署站点时候,出现如下错误 “/”应用程序中的服务器错误. ---------------------------------------------------------------------- ...
- 层叠水平(stacking level)
运用上图的逻辑,上面的题目就迎刃而解,inline-blcok 的 stacking level 比之 float 要高,所以无论 DOM 的先后顺序都堆叠在上面. 不过上面图示的说法有一些不准确,按 ...
- CSS3 animation小动画
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- 如何取消FLEX里模态窗口的毛玻璃效果
在Flex里面,比如使用PopUpManager.createPopUp(this,TipWindow,false)第三个参数设成true 会出现毛玻璃效果让CPU飙升,可不可以改变模态窗口的效果,不 ...
- ORA-00845
系统版本: [root@yoon ~]# more /etc/oracle-releaseOracle Linux Server release 5.7 数据库版本: Oracle Database ...
- IOS开发经验分享
一些IOS开发的心得: 1) [Multiple Threads] IOS多线程注意, 所有的UI操作都必须在主线程上: Any code that will update the UI should ...