jsrender提供多重循环方式

  1. 1.{{for array}}循环数组
  2.  
  3. 2.{{props object}}循环对象

1.for array的使用

  1. <body>
  2.  
  3. <div id="result"></div>
  4.  
  5. <script id="theTmpl" type="text/x-jsrender">
  6. <b>{{:title}}</b>
  7. <ul>
  8.   {{for members}}
  9.       <li>{{:name}} lives in <b>{{:address.city}}</b></li>
  10.   {{/for}}
  11. </ul>
  12. </script>
  13.  
  14. <script>
  15. var data = {
  16.   "title": "The A team",
  17.   "members": [
  18.     {
  19.       "name": "Pete",
  20.       "address": {
  21.         "city": "Seattle"
  22.       }
  23.     },
  24.     {
  25.       "name": "Heidi",
  26.       "address": {
  27.         "city": "Sidney"
  28.       }
  29.     }
  30.   ]
  31. };
  32.  
  33. var template = $.templates("#theTmpl");
  34.  
  35. var htmlOutput = template.render(data);
  36.  
  37. $("#result").html(htmlOutput);
  38. </script>
  39.  
  40. </body>

2.props object的使用

循环object中的所有属性

  1. <body>
  2.  
  3. <div id="result"></div>
  4.  
  5. <script id="theTmpl" type="text/x-jsrender">
  6. <table><tbody>
  7.   <tr><td><b>name:</b> {{:name}}</td></tr>
  8.   <tr><td>
  9.   {{props address}}
  10.     <b>{{>key}}:</b> {{>prop}}<br/>
  11.   {{/props}}
  12.   </td></tr>
  13. </tbody></table>
  14. </script>
  15.  
  16. <script>
  17. var data = [
  18.   {
  19.     "name": "Pete",
  20.     "address": {
  21.       "street": "12 Pike Place",
  22.       "city": "Seattle",
  23.       "ZIP": "98101"
  24.     }
  25.   },
  26.   {
  27.     "name": "Heidi",
  28.     "address": {
  29.       "street": "5000 Broadway",
  30.       "city": "Sidney",
  31.       "country": "Australia"
  32.     }
  33.   }
  34. ];
  35.  
  36. var template = $.templates("#theTmpl");
  37.  
  38. var htmlOutput = template.render(data);
  39.  
  40. $("#result").html(htmlOutput);
  41. </script>
  42.  
  43. </body>

jsRender 循环for 和props的更多相关文章

  1. jquery-jsrender使用

      JsRender是一款基于jQuery的JavaScript模版引擎 特点: · 简单直观 · 功能强大 · 可扩展的 · 快如闪电 jsrender使用比较简单,本文简单结束一些常用的 使用过程 ...

  2. Preact（React）核心原理详解

    原创: 宝丁 玄说前端 本文作者:字节跳动 - 宝丁 一.Preact 是什么 二.Preact 和 React 的区别有哪些? 三.Preact 是怎么工作的 四.结合实际组件了解整体渲染流程 五. ...

  3. JsRender实用教程(tag else使用、循环嵌套访问父级数据)

    前言 JsRender是一款基于jQuery的JavaScript模版引擎,它具有如下特点: ·  简单直观 ·  功能强大 ·  可扩展的 ·  快如闪电 这些特性看起来很厉害,但几乎每个模版引擎, ...

  4. javascript模板库jsrender for循环嵌套示例

    最近在参与整合前端的框架,我们知道javascript最强大的模板引擎之一当属jsrender,号称下一代jquery模板引擎的标准实现. 通常在模板merge的过程中,我们会遇到两次乃至三级嵌套的情 ...

  5. JsRender for index 循环索引使用说明

    循环是模版引擎必不可少的一部分,而说起循环,会引出一个至关重要的因素:索引. 所谓索引,即循环次数,通过索引,可以获取当前循环是第几次. 如果读者阅读过官方文档,会见到如下获取索引的方式: data: ...

  6. knockoutJS学习笔记02：jsRender模板引擎

    上一篇最后提到了模板,并尝试自己编写一个最简单版本:有些朋友可能用过 jqtmpl,这是一个基于jquery的模板引擎,不过它已经不再更新了,而且据说渲染速度比较慢.这里介绍另外一个模板引擎:jsRe ...

  7. JsRender for object 语法说明

    JsRender 作为一款JavaScript模版引擎,必不可少的会有循环功能,也就是for,但由于JsRender过于灵活,for竟然可以接受object作为循环对象. {{for Array}}和 ...

  8. 高级 JsRender 模板功能

    转自:http://msdn.microsoft.com/zh-cn/magazine/hh975379.aspx 尽管模板很强大,但有时模板引擎提供的现成标准功能无法满足您的需求. 您可能要转换数据 ...

  9. jsRender模板引擎

    jsRender模板引擎 上一篇最后提到了模板,并尝试自己编写一个最简单版本:有些朋友可能用过 jqtmpl,这是一个基于jquery的模板引擎,不过它已经不再更新了,而且据说渲染速度比较慢.这里介绍 ...

随机推荐

  1. css默认值汇总

    原文:http://www.cnblogs.com/xiangzi888/archive/2011/10/12/2209514.html HTML标签CSS属性默认值汇总 这个东西,在你需要还原默认值 ...

  2. ios更新UI时请尝试使用performSelectorOnMainThread方法

    最近开发项目时发现联网获取到数据后,使用通知方式让列表刷新会存在死机的问题. 经过上网查找很多文章,都建议使用异步更新的方式,可是依然崩溃. 最后尝试使用performSelectorOnMainTh ...

  3. 傅盛：如何快慢“炼”金山？（转）

    原文地址:http://www.huxiu.com/article/16052/1.html 一直以来,金山都不是一家"大公司",从前不是,现在也不是. 能够掰着指头数完腾讯六大事 ...

  4. 您的项目引用了最新实体框架；但是，找不到数据链接所需的与版本兼容的实体框架数据库 EF6使用Mysql的技巧

    转载至: http://www.cnblogs.com/Imaigne/p/4153397.html 您的项目引用了最新实体框架:但是,找不到数据链接所需的与版本兼容的实体框架数据库 EF6使用Mys ...

  5. Linux shell实战（ipcs工具）

    #!/bin/bash -o $# -gt ] then echo "参数个数不正确!" exit - fi WHOAIM=`whoami` function release { ...

  6. codevs2010 求后序遍历

    难度等级:白银 2010 求后序遍历 题目描述 Description 输入一棵二叉树的先序和中序遍历序列,输出其后序遍历序列. 输入描述 Input Description 共两行,第一行一个字符串 ...

  7. FFmpeg中HLS文件解析源码

    不少人都在找FFmpeg中是否有hls(m3u8)解析的源码,其实是有的.就是ffmpeg/libavformat/hlsproto.c,它依赖的文件也在那个目录中. 如果要是单纯想解析HLS的话,建 ...

  8. [转]注释驱动的 Spring cache 缓存介绍

    原文:http://www.ibm.com/developerworks/cn/opensource/os-cn-spring-cache/ 概述 Spring 3.1 引入了激动人心的基于注释(an ...

  9. mongodb .net core 调用

    MongoClient _client; IMongoDatabase _db; MongoCredential credential = MongoCredential.CreateMongoCRC ...

  10. 通过源码分析MyBatis的缓存

    前方高能! 本文内容有点多,通过实际测试例子+源码分析的方式解剖MyBatis缓存的概念,对这方面有兴趣的小伙伴请继续看下去~ MyBatis缓存介绍 首先看一段wiki上关于MyBatis缓存的介绍 ...