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. 一行代码远离Google浏览器兼容问题的困扰

    跟Html相比,Web Flash开发的最大优势就在于兼容性好,因为FlashPlayer的开发商只有Adobe一家.但自从Google插了一脚进来,改版出自己的FlashPlayer以后,这一优势就 ...

  2. JavaWeb学习总结，文件上传和下载

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 对于文件上传,浏览器在上传的过程中是将文件以流的形式提交到服务器端的,如果直接使用 ...

  3. chrome插件编写之新版hello world

    编写chrome插件之前,需要熟悉一下相应的chrome插件开发环境.从编写hello world开始,参考阅读官方的教程,是一个不错的选择.这里主要是基于chrome的官方教程,稍稍做了一些修改和扩 ...

  4. DINIC网络流+当前弧优化

    DINIC网络流+当前弧优化 const inf=; type rec=record s,e,w,next:longint; end; var b,bb,d,q,tb:..] of longint; ...

  5. header

    本文分享几个php header函数的例子,有需要的朋友参考学习下. 转自:http://www.jbxue.com/article/php_header_x5hV63c.html 1,可以使用hed ...

  6. php 正则匹配中文(转)

    我使用正则表达式来匹配中问的时候,出现了无法匹配的问题,问题如下 PCRE does not support \L, \l, \N{name}, \U, or \u at offset 2 我原来的匹 ...

  7. .net RPC框架选型

    近期开始研究分布式架构,会涉及到一个最核心的组件:RPC(Remote Procedure Call Protocol).这个东西的稳定性与性能,直接决定了分布式架构系统的好坏.RPC技术,我们的产品 ...

  8. 特殊约束From To

    说实话这个不太懂,没用过也没有遇到相应的情况(或者说我不知道).大家可以更多的去参考特定约束FROM TO和MicroZed开发板笔记,第72部分:多周期约束等内容. 本文待修正 系列目录      ...

  9. 一起来学node.js吧 node school简介

    node.js这几年火爆的简直丧心病狂,去lagou.com查查node.js的职位,那叫一个多. 要说火爆到什么程度,竟然有一个网站专门去教大家学习node.js, Node School. 进去逛 ...

  10. Groovy与Gradle在Android中的应用

    大家都知道, Android Studio 的编译构建,是基于Gradle的, 而Gradle又是基于Groovy, Groovy又是基于Java的 Android Studio 的gradle 本身 ...