最近在参与整合前端的框架，我们知道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. 阿里云ecs Linux下安装MySQL后设置root密码 【转】

    方法一:最简单的方法,也是安装完mysql后,系统提示的方法.使用mysqladmin来完成.shell> mysqladmin -u root password "newpwd&qu ...

  2. Findbugs介绍及使用方法

    1.   简介 Findbugs 是一个静态分析工具,它检查类或者 JAR 文件,将字节码与一组缺陷模式进行对比以发现可能的问题.利用这个工具,就可以在不实际运行程序的情况对软件进行分析.它可以帮助改 ...

  3. MySQL(二) 数据库数据类型详解

    序言 今天去健身了,感觉把身体练好还是不错的,闲话不多说,把这个数据库所遇到的数据类型今天统统在这里讲清楚了,以后在看到什么数据类型,咱度应该认识,对我来说,最不熟悉的应该就是时间类型这块了.但是通过 ...

  4. Web Workers 的基本信息

    问题:JavaScript 并行性 要将有趣的应用(例如从侧重服务器端的实施)移植到客户端 JavaScript,存在很多制约瓶颈.其中包括浏览器兼容性.静态类型.可访问性和性能.幸运的是,随着浏览器 ...

  5. 【目录】开源Math.NET基础数学类库使用总目录

    本博客所有文章分类的总目录链接:[总目录]本博客博文总目录-实时更新  1.开源Math.NET数学组件文章   1.开源Math.NET基础数学类库使用(01)综合介绍   2.开源Math.NET ...

  6. Android基于mAppWidget实现手绘地图（十）–在放大前后执行一些操作

    为了在放大前后执行一些操作,你需要添加MapEventsListener 的实例到MapWidget,使用MapWidget.removeMapEventsListener移除该监听器. mapWid ...

  7. Deep learning：四十二(Denoise Autoencoder简单理解)

    前言: 当采用无监督的方法分层预训练深度网络的权值时,为了学习到较鲁棒的特征,可以在网络的可视层(即数据的输入层)引入随机噪声,这种方法称为Denoise Autoencoder(简称dAE),由Be ...

  8. 简单设置，解决使用webpack前后端跨域发送cookie的问题

    最近用vue来做项目,用webpack来做前端自动化构建.webpack-dev-server会在本地搭建一个服务器,在和后端调试的时候,就会涉及到跨域的问题. 刚开始时,没有用vue-cli来构建项 ...

  9. SQL Server安全（1/11）：SQL Server安全概述

    在保密你的服务器和数据,防备当前复杂的攻击,SQL Server有你需要的一切.但在你能有效使用这些安全功能前,你需要理解你面对的威胁和一些基本的安全概念.这篇文章提供了基础,因此你可以对SQL Se ...

  10. 阅读《LEARNING HARD C#学习笔记》知识点总结与摘要一

    本人有幸在Learning Hard举行的整点抢书活动<Learninghard C#学习笔记>回馈网友,免费送书5本中免费获得了一本<LEARNING HARD C#学习笔记> ...