1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title></title>
  6. <script type="text/javascript" src="scripts/jquery.js"></script>
  7. <script type="text/javascript" src="scripts/jquery-ui.js"></script>
  8. <script type="text/javascript" src="scripts/jsrender.js"></script>
  9. <link href="scripts/demos.css" rel="stylesheet" />
  10. <link href="scripts/movielist.css" rel="stylesheet" />
  11. </head>
  12. <body>
  13. <script id="movieTemplate" type="text/x-jsrender">
  14. <tr>
  15. <td>{{:title}}</td>
  16. <td>{{for languages}}
  17. <div class="{{:#index%2 ? 'even' : 'odd'}}"></div>
  18. <em>{{:name}}</em>
  19. {{else}}
  20. No alternate languages!
  21. {{/for}}</td>
  22. </tr>
  23. </script>
  24. <h2>Using {{for}} to render hierarchical data - inline nested template.</h2>
  25. <table>
  26. <thead>
  27. <tr>
  28. <th>title</th>
  29. <th>movieList</th>
  30. </tr>
  31. </thead>
  32. <tbody id="movieList"></tbody>
  33. </table>
  34.  
  35. <script type="text/javascript">
  36. var movies = [
  37. {
  38. title: "Meet Joe Black",
  39. languages: [
  40. { name: "English" },
  41. { name: "French" }
  42. ]
  43. },
  44. {
  45. title: "Eyes Wide Shut",
  46. languages: [
  47. { name: "French" },
  48. { name: "Mandarin" },
  49. { name: "Spanish" }
  50. ]
  51. },
  52. {
  53. title: "The Inheritance",
  54. languages: [
  55. { name: "English" },
  56. { name: "German" }
  57. ]
  58. },
  59. {
  60. title: "Local Story",
  61. languages: []
  62. },
  63. {
  64. title: "My Home Video"
  65. }
  66. ];
  67. $("#movieList").html($("#movieTemplate").render(movies));
  68. </script>
  69. </body>
  70. </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. CityEngine2012(32位)安装

    今天下午把CityEngine2012装好了,既然Esri大力推CityEngine作为其三维建模软件,那就学习一下,还好没花多长时间搞定破解版,以前装Erdas,南方CASS,AutoCAD那些该死 ...

  2. 【转】使用Memcached提高.NET应用程序的性能

    在应用程序运行的过程中总会有一些经常需要访问并且变化不频繁的数据,如果每次获取这些数据都需要从数据库或者外部文件系统中去读取,性能肯定会受到影响,所以通常的做法就是将这部分数据缓存起来,只要数据没有发 ...

  3. 【风马一族_Android】手机与电脑通过adb进行连接

    1:打开电脑的命令行 cmd 2:adb devices 查看与电脑连接的手机或模拟器的名称 3:准备要安装的apk.记住手机的名称 4:adb –s <模拟器名称> install  & ...

  4. php威盾解密的例子分享

    例子,批量解密  代码如下 复制代码 <?php/************************************威盾PHP加密专家解密算法 By:zhrt*http://www.111 ...

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

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

  6. Repeat Header / Keep Header Visible in Tables in RS 2008

    You selected "Repeat header rows on each page" or "Keep header rows visible while scr ...

  7. MySQL数据库主从复制

    一.MySQ主从复制(主库写入数据,从库读取数据) MySql官方下载地址:http://dev.mysql.com/downloads/mysql/ MySql常用命令: 设置密码 UPDATE U ...

  8. 正确处理WPF中Slider值改变事件的方式

    最近在用WPF数据绑定重写一下播放器项目时遇到的关于Slider的问题,在窗体透明度调节和播放进度调节上用了Slider控件.调节窗体透明度我是 这么想的:将窗体的Opacity属性的值与Slider ...

  9. WPF自定义控件(三)——Window

    一样!先来看看效果吧: 怎么样?效果很好吧,而且不只是样式哟!所有系统窗体有的交互操作都可以实现! 但可惜...有很多和系统API有关的东西本人了解得并不多,所以这个窗体是基于他人的成果上产生的.关于 ...

  10. Log.i()的用法

    2011-04-16 09:44 17486人阅读 评论(4) 收藏 举报 androidlayoutbuttonstringencodingeclipse 在调试代码的时候我们需要查看调试信息,那我 ...