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. SilverFoxServer出炉！！

    SilverFoxServer是啥?各位看官搜一下SmartFoxServer便知 是一套服务端+客户端通迅框架,快速搭建起回合制,棋牌类的联机 网页游戏 SilverFoxServer的特点包括 用 ...

  2. span 与p 的区别，以及内联元素的作用

    1.一般标签都有语义,p标签是指一个段落,而且默认是一个块级元素,span是一个行内元素的代表,没有什么意思,一般可以放文字等行内元素,例如<p>这是一段简介内容这是一段 <span ...

  3. sublime3 常用插件

    1,emmet,html代码自动补全插件 2,jsFormat js格式化插件 3,HTMLBeautify 格式化html插件 4,autoPrefix css3自动补全前缀 5,SublimeCo ...

  4. Python的高级特性9:蹩脚的多态

    学习了java再来看python的多态,总感觉怪怪的,很蹩脚.. 1.python的父类根本不能调用子类的方法,只能蹩脚的依靠重写方法,然后在运行时去调用,实现伪多态... 2.所谓的鸭子类型看起来很 ...

  5. java工程中的.classpathaaaaaaaaaaaaaaaa<转载>

    第一部分:classpath是系统的环境变量,就是说JVM加载类的时候要按这个路径下去找,当然这个路径下可以有jar包,那么就是jar包里所有的class. eclipse build path是ec ...

  6. JVM的堆(heap)、栈(stack)和方法区(method)

    JVM主要由类加载器子系统.运行时数据区(内存空间).执行引擎以及与本地方法接口等组成.其中运行时数据区又由方法区Method Area.堆Heap.Java stack.PC寄存器.本地方法栈组成. ...

  7. js读取解析JSON类型数据（转）

    谢谢博主,转自http://blog.csdn.net/beyond0851/article/details/9285771 一.什么是JSON? JSON(JavaScript Object Not ...

  8. Flex String转Date

    在Flex中日期字符串转为Date类型,可以使用静态方法DateFormatter.parseDateString(str:String):Date方法. 该方法支持的字符串格式包括: YYYY-MM ...

  9. 黑暗圣经---物业公司CTO/CEO改如何给老板推荐物业信息化产品

    多年前一次偶然的机会进入到物业信息化行业,在这个过程中认识很多奋战在物业一线的技术大牛.很多时候都会介绍一些朋友给我认识一下,帮我推荐一下我们闻风多奇的物业管理平台.很多朋友看完我们的系统之后都会很开 ...

  10. AR 不同 继承映射的问题总结

    在使用AR(Nhibernate) 做ORM时,使用类的继承体系时,它有不同的映射方式,解决的问题不同,带来的问题差异也很大. 1.所有数据 存储在一张表,不同的类使用 DiscriminatorCo ...