jsrender提供多重循环方式

1.{{for array}}循环数组

2.{{props object}}循环对象

1.for array的使用

<body>

<div id="result"></div>

<script id="theTmpl" type="text/x-jsrender">

<b>{{:title}}</b>

<ul>

  {{for members}}

      <li>{{:name}} lives in <b>{{:address.city}}</b></li>

  {{/for}}

</ul>

</script>

<script>

var data = {

  "title": "The A team",

  "members": [

    {

      "name": "Pete",

      "address": {

        "city": "Seattle"

      }

    },

    {

      "name": "Heidi",

      "address": {

        "city": "Sidney"

      }

    }

  ]

};

var template = $.templates("#theTmpl");

var htmlOutput = template.render(data);

$("#result").html(htmlOutput);

</script>

</body>

2.props object的使用

循环object中的所有属性

<body>

<div id="result"></div>

<script id="theTmpl" type="text/x-jsrender">

<table><tbody>

  <tr><td><b>name:</b> {{:name}}</td></tr>

  <tr><td>

  {{props address}}

    <b>{{>key}}:</b> {{>prop}}<br/>

  {{/props}}

  </td></tr>

</tbody></table>

</script>

<script>

var data = [

  {

    "name": "Pete",

    "address": {

      "street": "12 Pike Place",

      "city": "Seattle",

      "ZIP": "98101"

    }

  },

  {

    "name": "Heidi",

    "address": {

      "street": "5000 Broadway",

      "city": "Sidney",

      "country": "Australia"

    }

  }

];

var template = $.templates("#theTmpl");

var htmlOutput = template.render(data);

$("#result").html(htmlOutput);

</script>

</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. StringBuffer和StringBuilder的区别

    StringBuffer和StringBuilder的区别 StringBuffer与StringBuilder就不一样了,他们是字符串变量,是可改变的对象,每当我们用它们对字符串做操作时,实际上是在 ...

  2. Makefile规则③规则语法、依赖、通配符、目录搜寻、目标

    规则语法 通常规则的语法格式如下: TARGETS : PREREQUISITES COMMAND ... 或者: TARGETS : PREREQUISITES ; COMMAND COMMAND ...

  3. https网站跳转到http网站时，referrer获取不到的问题

    工作中,有一个活动列表页A,要链接到具体的活动详情页B,A页面放在https网站上,B页面放在http网站上,从https跳转到http网站时,为了用户隐私安全信息,浏览器默认不传送referrer ...

  4. nginx反向代理tomcat访问时浏览器加载失败，出现 ERR_CONTENT_LENGTH_MISMATCH 问题

    问题说明:测试机上部署了一套业务环境,nginx反向代理tomcat,在访问时长时间处于加载中,十分缓慢! 通过浏览器调试(F12键->Console),发现有错误ERR_CONTENT_LEN ...

  5. 多个mapper location时, mybatis spring的自动扫描配置

    1. MapperScannerConfigurer 里面的basePackage, 多个package用逗号分隔 2. SqlSessionFactoryBean里面的mapperLocations ...

  6. facebook graphql

    思想先进,前端直接从后台调用所需要的数据. 最简单的理解: 从"select * from 学生表" 进化为"select name, sex from 学生表" ...

  7. 重构Web Api程序(Api Controller和Entity) 续篇(1)

    经过一系列重构,你眼明的话,还是可以看到还有重构的地方,如: string newFileName = "~/Temp/" + Guid.NewGuid().ToString() ...

  8. 在SharePoint列表中使用自增栏

    问:sps2010里能不能新建个栏,数字型的,自动加一 答:在SharePoint里,有很多方法可以实现一个自增栏.在这里,我将介绍其中两种方式. 1.计算栏 2.列表项事件接收器 1.采用计算栏来实 ...

  9. Linux 网络编程详解八

    TCP/IP协议三次握手机制 TCP/IP是全双工通道,两端都可以读写,三次握手机制就是验证TCP/IP是否是全双工通道 1.客户端调用connect()函数,阻塞客户端进程,客户端向服务器发送数据包 ...

  10. dev gridcontrol纵向合并单元格设置

    1.要设置gridcontrol中指定列(columns中选中指定列)的AllowMerge属性为true; 2.要设置gridview中AllowCellMerge的属性为true; 3.如果只合并 ...