最近在参与整合前端的框架，我们知道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. javascript_core_03之数组

    1.数组:连续存储多个数据,一组连续变量的集合: ①创建空数组:var arr=[]:或者var arr=new Array(): ②创建初始化数组:var arr=[值1,值2,……]:或者var ...

  2. 重构Mybatis与Spring集成的SqlSessionFactoryBean（2）

    三.代码重构 1.先使用Eclipse把buildSqlSessionFactory()方法中众多的if换成小函数 protected SqlSessionFactory buildSqlSessio ...

  3. 锋利的jQuery——19个jQuery 常用片段整理

    /** * Created by yu on 2016/11/20 0020. */// 1.禁用页面右键菜单$(function () { $(document).on('contextmenu', ...

  4. VS报错:_CRT_SECURE_NO_WARNINGS

    常见报错:warning C4996: 'fopen': This function or variable may be unsafe. Consider using fopen_s instead ...

  5. PHP变量在内存中的存储方式

    原文:http://www.phppan.com/tag/refcount/ 每门计算机语言都需要一些容器来保存变量数据.在一些语言当中,变量都有特定的类型,如字符串,数组,对象等等.比如C和Pasc ...

  6. 再读GFS论文

    http://loopjump.com/gfs_paper_note/ 再读GFS的一些笔记.主要涉及GFS架构.Chunk大小选择的一些折中考量.元数据管理及锁.写数据流程.GFS一致性模型的理解. ...

  7. knockoutjs中使用mapping插件绑定数据列表

    使用KO绑定数据列表示例:   1.先申请V,T,T2三个辅助方法,方便调试.声明viewModel和加载数据时的映射条件mapping    2.先使用ko.mapping.fromJS()将原来的 ...

  8. SQL*Loader之CASE7

    CASE7 1. SQL脚本 case7包含两个SQL脚本,一个是删除脚本ulcase7e.sql,一个是创建脚本ulcase7s.sql [oracle@node3 ulcase]$ cat ulc ...

  9. shell脚本学习心得

    近来主要捣鼓ubuntu,大多数项目中都用到了sh脚本作为启动脚本等,以前只是大概明白如何使用,今天需要自己修改并运行脚本就碰到了很多问题,所以决定静下心来学习一下shell脚本,学习了几个小时,现将 ...

  10. 在Python中实现PageFactory模式

    关于 PageFactory 的概念主要是Java中内置了PageFactory类. import org.openqa.selenium.support.PageFactory; …… 例子,htt ...