最近在参与整合前端的框架，我们知道javascript最强大的模板引擎之一当属jsrender，号称下一代jquery模板引擎的标准实现。

通常在模板merge的过程中，我们会遇到两次乃至三级嵌套的情形，强大的jsrender自然会支持，如下所示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>

    <script type="text/javascript" src="jsrender.js"></script>

    <title>jsrender nest demo</title>

</head>

<body>

<div id="studentList">abc</div>

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

    {{for #data}}

        <h3>{{:name}}</h3>

        <ul>

        {{for language}}

            <li>

            {{:#parent.parent.data.name}} is learning {{:title}}<br/>

            {{for scores}}

                <a href="#">{{:score}}</a>

            {{/for}}

            </li>

        {{/for}}

        </ul>

    {{/for}}

</script>

<script type="text/javascript">

    var students = [{name:"张三",language:[{title:"中",scores:[{score:12},{score:13},{score:14}]},{title:"英",scores:[{score:12},{score:13},{score:14}]},{title:"数",scores:[{score:12},{score:13},{score:14}]}]},

                    {name:"李四",language:[{title:"中",scores:[{score:12},{score:13},{score:14}]},{title:"中",scores:[{score:12},{score:13},{score:14}]},{title:"中",scores:[{score:12},{score:13},{score:14}]}]},

                    {name:"王五",language:[{title:"中",scores:[{score:12},{score:13},{score:14}]},{title:"中",scores:[{score:12},{score:13},{score:14}]},{title:"中",scores:[{score:12},{score:13},{score:14}]}]}];

    $("#studentList").html($("#studentTemplate").render(students));

</script>

</body>

</html>

效果如下：

javascript模板库jsrender for循环嵌套示例的更多相关文章

  1. javascript模板库jsrender加载并缓存外部模板文件

    前一篇说了jsrender嵌套循环的使用,在SPA的应用中,广泛使用的一个点就是view模板,使用了SPA之后,每个业务页面不再是独立的html,仅仅是一个segment,所以通常这些segment会 ...

  2. C语言for循环嵌套示例

    打印九九乘法表 #include <stdio.h> int main() {   int n,i,j; for (i=1;i<=9;i++) printf("%-4d&q ...

  3. 使用 JavaScript 用循环嵌套输出乘法表。外循环控制行数，内循环控制当前行要输出的乘法表达式，在页面上输出九九乘法表

    查看本章节 查看作业目录 需求说明: 在页面上输出九九乘法表,实现效果如图所示 实现思路: 创建HTML页面 在页面中嵌入 <script type="text/javascript& ...

  4. 使用JavaScript循环嵌套解决各种图形

    [循环嵌套的规律]    1.外层循环控制行数,内层循环控制每行中元素的个数. [图形题思路]    1.确定图形有几行,行数即为外层循环次数:    2.确定每行中有几种元素组成,有几种元素表示有几 ...

  5. JavaScript中For循环以及For循环嵌套实例

    JavaScript中For循环实例 1.打印出所有的 "水仙花数 ",所谓 "水仙花数 "是指一个三位数,其各位数字立方和等于该数本身. 例如:153是一个 ...

  6. JavaScript模板引擎实例应用

    在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及如何使用,文末还提到了laytpl.art ...

  7. Javascript模板引擎mustache.js详解

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  8. c++模板库(简介)

    目 录 STL 简介 ......................................................................................... ...

  9. JavaScript模板引擎

    JavaScript模板引擎实例应用   在之前的一篇名为<移动端基于HTML模板和JSON数据的JavaScript交互>的文章中,我向大家说明了为什么要使用JavaScript模板以及 ...

随机推荐

  1. js在控件原有的事件方法中加入自己的方法

    有没有碰到过这样的情况,在一个别人的页面上,你想为某个按钮加入自己的控制逻辑,满足条件的情况下才执行原有的事件方法呢? 这个时候在不能修改其原有方法的情况下,先获取控件的事件方法,并将其包装到自己的控 ...

  2. urldecode解码方法

    输入为带有urldecode转码文本,输出正常文本. //20130625 by zhangyl private string ConvertToString(string input) { inpu ...

  3. SSRS2：Reporting Service 配置Service Account

    1,Service Account SSRS以一个Service方式实现,有三部分组成:Web Service,Report Manager和一个后台的进程,这个Service运行的账号就是Servi ...

  4. .Net Request.Form含有危险字符的处理办法

    今天我们的网站遇到一个问题,下标就类似于化学分子式这样的是需要用"<sub></sub>"这个标签括起来的,当时没有转义,有部分标签就显示不出来了, 后来我 ...

  5. 使用Javascript监控前端相关数据

    项目开发完成外发后,没有一个监控系统,我们很难了解到发布出去的代码在用户机器上执行是否正确,所以需要建立前端代码性能相关的监控系统. 所以我们需要做以下的一些模块: 一.收集脚本执行错误 functi ...

  6. Android基于mAppWidget实现手绘地图（二）--概要

    离线地图是一张被切成类似瓷砖般格子图像组成,这些被切开的格子组织成多个缩放级别.缩放级别是从0开始.0这个缩放级别,地图图像的尺寸为1*1像素.在每下一个缩放级别,图像尺寸则会两倍递增. 每个地图都是 ...

  7. Spark入门实战系列--7.Spark Streaming（上）--实时流计算Spark Streaming原理介绍

    [注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 .Spark Streaming简介 1.1 概述 Spark Streaming 是Spa ...

  8. Testing - 测试基础 - 用例

    测试用例 是指对一项特定的软件产品进行测试任务的描述,体现测试方案.方法.技术和策略. 内容包括测试目标.测试环境.输入数据.测试步骤.预期结果.测试脚本等,并形成文档. 每个具体测试用例都将包括下列 ...

  9. 可视化工具solo show

    辗转一圈还是回到了我魂牵梦绕的可视化上来了. 在Gephi+Netbeans上折腾了将近一个星期后,我深深的体会到个人对于代码的驾驭能力尚有提升的空间^_^,路很长,方向很重要,三思而行. 转载请标明 ...

  10. CNN 笔记1