废话不说了，直接上代码

<!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类型数据的探讨的更多相关文章

  1. JsRender系列demo(7)compline

    <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.j ...

  2. JsRender系列demo(9)自定义函数

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

  3. JsRender系列demo(6)-无名

    <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery.j ...

  4. JsRender系列demo(5) for else

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

  5. JsRender系列demo(4)-if else

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

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

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

  7. JsRender系列demo(2)多模板-template

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

  8. JsRender系列demo(1)-insert-data

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

  9. Struts2+Jquery实现ajax并返回json类型数据

    来源于:http://my.oschina.net/simpleton/blog/139212 摘要 主要实现步骤如下: 1.JSP页面使用脚本代码执行ajax请求 2.Action中查询出需要返回的 ...

随机推荐

  1. Linux 软中断

    本文转载自: http://blog.chinaunix.net/uid-9620812-id-3833377.html,如有需要,请移步访问. Technorati 标签: Linux 软中断 -- ...

  2. linux下dup/dup2函数的用法

    系统调用dup和dup2能够复制文件描述符.dup返回新的文件文件描述符(没有用的文件描述符最小的编号).dup2可以让用户指定返回的文件描述符的值,如果需要,则首先接近newfd的值,他通常用来重新 ...

  3. CSS3属性box-shadow使用教程

    CSS3的box-shadow属性可以让我们轻松实现图层阴影效果.我们来实战详解一下这个属性. 1. box-shadow属性的浏览器兼容性先来看一个这个属性的浏览器兼容性: Opera: 不知道是从 ...

  4. WInform启动另一个项目传值

    背景:从A项目中登陆后,跳转到B项目的某个页面(B不再登陆). A项目启动进程: public Form1() { InitializeComponent(); } #region 调用进程 [Dll ...

  5. js正则学习及一些正则集合

    正则中文版详细说明请看中文版w3cschool-----http://www.w3school.com.cn/jsref/jsref_obj_regexp.asp微软正则表达式语言-快速参考:http ...

  6. php进行多个数组合并zip

    $a = array_zip(array("Dog","Cat","Horse"), array(1,2,3), array("l ...

  7. div+css遮罩层

    曾被问到这个问题,不知所措,后来在网上找到了.大神文章:http://www.cnblogs.com/aspx-net/archive/2011/03/11/1981071.html 我想实现的效果没 ...

  8. Win7下配置nginx和php5

    本文链接:http://www.cnblogs.com/cnscoo/archive/2012/09/03/2668577.html 一.准备工作: OS:Windows7 SP1 Nginx: ng ...

  9. POJ 3801 有上下界最小流

    1: /** 2: POJ 3801 有上下界的最小流 3: 4: 1.对supersrc到supersink 求一次最大流,记为f1.(在有源汇的情况下,先使整个网络趋向必须边尽量满足的情况) 5: ...

  10. Pomodairo,番茄工作法-解刨篇

    处于“信息大爆炸”的 e 时代的我们每天必定要处理很多的事情,不管是工作.学习.生活......面对这么多的纷杂的事物我们将如何应对?如何做到有条不紊的进行?高效.轻松.愉快的完成它呢?这时一款精致的 ...