<!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 id="movieTemplate" type="text/x-jsrender">

        <tr>

            <td>{{:title}}</td>

            <td>{{for languages}}

                <div class="{{:#index%2 ? 'even' : 'odd'}}"></div>

                <em>{{:name}}</em>

                {{else}}

                No alternate languages!

                {{/for}}</td>

        </tr>

    </script>

    <h2>Using {{for}} to render hierarchical data - inline nested template.</h2>

    <table>

        <thead>

            <tr>

                <th>title</th>

                <th>movieList</th>

            </tr>

        </thead>

        <tbody id="movieList"></tbody>

    </table>

    <script type="text/javascript">

        var movies = [

		{

		    title: "Meet Joe Black",

		    languages: [

				{ name: "English" },

				{ name: "French" }

		    ]

		},

		{

		    title: "Eyes Wide Shut",

		    languages: [

				{ name: "French" },

				{ name: "Mandarin" },

				{ name: "Spanish" }

		    ]

		},

		{

		    title: "The Inheritance",

		    languages: [

				{ name: "English" },

				{ name: "German" }

		    ]

		},

		{

		    title: "Local Story",

		    languages: []

		},

		{

		    title: "My Home Video"

		}

        ];

        $("#movieList").html($("#movieTemplate").render(movies));

    </script>

</body>

</html>

　　

JsRender系列demo(5) for else的更多相关文章

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

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

  2. JsRender系列demo(7)compline

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

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

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

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

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

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

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

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

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

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

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

  8. JsRender系列-11

    <!DOCTYPE html> <html> <head> <script type="text/javascript" src=&quo ...

  9. JsRender系列demo-10

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

随机推荐

  1. Codevs 1380 没有上司的舞会

    时间限制: 1 s  空间限制: 128000 KB  题目等级 : 钻石 Diamond 题目描述 Description Ural大学有N个职员,编号为1~N.他们有从属关系,也就是说他们的关系就 ...

  2. 4.Servlet_Form表单处理

    1.建项目"3Servlet_Form",src下建包“com.amaker.servlet”,web-root下建Register.html <!DOCTYPE html& ...

  3. grep恢复误删除文件内容(转)

    在 Linux 上如果事先没有用别名(alias)修改默认的 rm 功能,rm 后文件就会丢失,幸运的是,在一般的删除文件操作中,Linux 并不会立即清空存储该文件的 block 内容,而只会释放该 ...

  4. js 如何获取文本框中光标索引位置

    function getTxt1CursorPosition(){ var oTxt1 = document.getElementById("txt1"); var cursurP ...

  5. jquery插件formValidator的ajaxValidator传参数问题

    最近在用formValidator插件,遇到一个问题.当我想用ajaxValidator的url传参数时,$("#tbName").val().document.getElemen ...

  6. sublime3 注册码

    —– BEGIN LICENSE —– Michael Barnes Single User License EA7E-821385 8A353C41 872A0D5C DF9B2950 AFF6F6 ...

  7. 本地安装gem install --local redis-stat-0.4.13.gem

    因为主机环境不能联外网,悲哀,所以只能想办法下载包,上传到主机来安装 环境:el6.x86_64 1. gem 安装[http://centos.ustc.edu.cn/centos/6/os/x86 ...

  8. 使用Eclipse开发，Java Compiler中Annotation Processin不出现的解决方案

    第一步:在Eclipse菜单栏中点击Help,在点击inatall New Software 第二步:在Work with中找到 Juno - http://download.eclipse.org/ ...

  9. execute连接 类型

    set rs=server.createobject("adodb.recordset") sql="select top 10 id,name from tablena ...

  10. 【面试虐菜】—— Apache知识整理

    Apache性能调优1 Apache 部分:1. 移除不用的模块.2. 使用 mod_disk_cache NOT mod_mem_cache .3. 扁平架构配置mod_disk_cache.4.  ...