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. Java中的四套读写方案

    一.字节流读写方案 FileInputStream:字节流方式读取文本文件 FileoutputStream:字节流写入硬盘 二.字符流读写方案 FileReader:字符流读取文本 FileWrit ...

  2. u3d_shader_surface_shader_6

    主题:1.膨胀效果:2.surface shader实际生成的代码: o(︶︿︶)o  粘贴复制代码易,理解透彻代码难... 一:膨胀效果 1.在#pragma 编译指令里添加vertex:vert以 ...

  3. [No000035]操作系统Operating System之OS Interface操作系统接口

    接口(Interface) 仍然从常识开始… 日常生活中有很多接口:电源插座:汽车油门… 那什么是接口? 连接两个东西.信号转换.屏蔽细节… Interface: electrical circuit ...

  4. 常见HTTP状态基本解释

    本文摘自互联网,但是忘记了具体网址,请见谅 在网站建设的实际应用中,容易出现很多小小的失误,就像mysql当初优化不到位,影响整体网站的浏览效果一样,其实,网站的常规http状态码的表现也是一样,Go ...

  5. JS 关闭 页面 浏览器 事件

    JS监听关闭浏览器事件关键字: js监听关闭浏览器事件Onunload与OnbeforeunloadOnunload,onbeforeunload都是在刷新或关闭时调用,可以在<script&g ...

  6. P1047 校门外的树

    P1047 校门外的树 题目描述 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米.我们可以把马路看成一个数轴,马路的一端在数轴0的位置,另一端在L的位置:数轴上的每个整数点,即0 ...

  7. BZOJ 4717 改装

    Description [题目背景] 小Q最近喜欢上了一款游戏,名为<舰队connection>,在游戏中,小Q指挥强大的舰队南征北战,从而成为了一名dalao.在游戏中,不仅船只能力很重 ...

  8. 批处理将字符串输出到Windows剪贴板

    批处理将字符串输出到Windows剪贴板 2016-06-30 23:29 339人阅读 评论(0) 收藏 举报 版权声明:作者:N3verL4nd 出处:http://blog.csdn.net/x ...

  9. 利用PowerShell+Jenkins，实现项目的自动化部署

    当项目越来越庞大,部署环境越来越多以后,就会越来越依赖于自动化.比如本人公司的项目,目前有6个web和4个windows service,同时本地有两套环境:开发自测试环境和QA测试环境.每次版本发布 ...

  10. 怎样修改 Openstack Horizon（Dashboard）的显示界面 （一）

    Openstack 有很多项目,比如 nova 是虚拟机管理,neutron 是虚拟网络管理, glance 是存储管理,而 horizon 是负责 Openstack 的统一界面.horizon 的 ...