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中查询出需要返回的 ...
随机推荐
- IOS绘图
#import "ViewController.h" #import "DrawView.h" @interface ViewController () @pr ...
- UILabel滚动字幕的实现
经常需要在应用中显示一段很长的文字,比如天气或者广告等,这时候使用滚动字幕的方式比较方便. 参考文献: [1] YouXianMing, 使用UILabel实现滚动字幕移动效果, 博客园 [2] ht ...
- WindowsMediaPlayer控件批量添加文件至播放列表
思路: 1.读取批定路径的目录文件. 2.用List存放. 3.循环List列表添加到播放列表. public void VidieoPlay() { //WindowsMediaPlayer1.ui ...
- Android混淆问题
最近做了2个项目,全部要混淆,刚接触,自己在网上找了还多资料,感觉各有千秋,自己总结了一下,第一次发帖,不喜勿喷.求各种指导!!! android应用程序的混淆打包规范 1.在工程文件project. ...
- php获取网页中图片并保存到本地的代码
php获取网页中图片并保存到本地的代码,将网页中图片保存本地文件夹: <?php /** * 获取网页中图片,并保存至本地 * by www.jbxue.com */ header(" ...
- Android NDK环境配置
之前做了一个基于ffmpeg的软解播放器,熟悉了NDK开发的配置环境过程,但是由于太忙一直没有时间写笔记. 首先,介绍一下在这里所参与协作的软件包: 1. JDK: 这个软件被Eclipse依赖. 2 ...
- asp.net 生成PDF方法
今天转博客园看到有人发表了一篇生成PFd的文章,准备自己也留一份准备以后用到的时候方便调用: 首先去itextsharp网站下载控件(https://sourceforge.net/projects/ ...
- DRP PK 牛腩新闻发布系统
一.JSP与ASP (1)Web服务器的支持:大多数通用的Web服务器如:Apache.Netscape和Microsoft IIS都支持JSP页面,只有微软本身的Microsoft IIS和Pers ...
- oracle 11g rac 修改字符集
系统版本: Oracle Linux Server release 5.7 数据库版本: Oracle Database 11g Enterprise Edition Release 11.2.0.3 ...
- Andriod WIFI驱动模块
一:什么是WIFI WIFI是一种无线连接技术,可用于手机.电脑.PDA等终端.WIFI技术产生的目的是改善基于IEEE802.11标准的无线网络产品之间的互通性,也就是说WIFI是基于802.11标 ...