最近在参与整合前端的框架，我们知道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中this指向

    在简单函数中,this是指向当前对象,可用来获取当前对象某个属性,但随着函数变复杂,this很多情况不指向当前对象,而是指向window. 1.在独立调用函数中,具有全局执行环境,this指向wind ...

  2. angularjs with node service

  3. 简单的跨平台c/c++日志记录

    CLog.h #include <stdlib.h> #pragma once #ifndef _CLOG #define _CLOG #define CLOG_DEBUG 0 #defi ...

  4. iOS $299刀企业证书申请的过程以及细节补充

    最近申请了iOS的 299刀企业证书,相关过程有些问题,分享出来,以便后来人参考. 申请的过程我主要参考了别人以前的文章,链接如下: 1.https://developer.apple.com/cn/ ...

  5. demo

    NGUI demo:http://112.124.104.173/killer/demo/demo.html 网络游戏架构(服务器放在阿里云,有时连接不上可能是服务器没有开) 只是测试框架,美术都是本 ...

  6. 菜鸟级别的WCF入门学习

    这两天学习WCF,看了MSDN上的入门教程,和查找了一些网上给的例子,简单的实现了一下,感觉应该很适合我这种菜鸟级的选手看了. 1.新建一个项目--WCF--WCF服务应用程序 用的是MSDN上的加减 ...

  7. codeforces——Little Pony and Sort by Shift

    /* 题目大意:给你一个序列,不断地将最后边的数值移动到最前边,问最少经过多少次可以变成一个单调递增的序列! 如果不能则输出-1. 如果该序列按照不断从后向前移动排序成功,那么该序列要么只有一个单调递 ...

  8. 自己的JS框架--Amy框架。

    这是我根据司徒正美<JavaScript框架设计>一书然后百度了很多东西之后自己写的一个JS框架,满足了司徒正美文中的种子模块部分,包含了命名空间.对象扩展.数组化.类型判断.选择器.多库 ...

  9. .Net常见错误

    常见错误 #1: 把引用当做值来用,或者反过来 C++ 和其他很多语言的程序员,习惯了给变量赋值的时候,要么赋单纯的值,要么是现有对象的引用.然而,在C# 中,是值还是引用,是由写这个对象的程序员决定 ...

  10. Azure Redis Cache (3) 创建和使用P级别的Redis Cache

    <Windows Azure Platform 系列文章目录> 在笔者之前的文档里面已经说明了,Azure Redis Cache分为三个不同的级别: - 基本,Basic,不包含SLA ...