前一篇说了jsrender嵌套循环的使用，在SPA的应用中，广泛使用的一个点就是view模板，使用了SPA之后，每个业务页面不再是独立的html，仅仅是一个segment，所以通常这些segment会被独立的存储，而不是跟demo一样嵌在宿主页面中。因为jsrender的模板本质上就是一个string，所以一般三方库angularjs/backbone.js都提供了加载外部模板的机制。其实原理都一样，差不多都是通过ajax从远程加载，然后缓存在B/S端，在jsrender中，通过类似机制，也可以达到一样的目标。如下所示：

render_seg.html

{{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}}

主页面jsrender_nest_external.html

<!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 external demo</title>

</head>

<body>

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

<script type="text/javascript">

    var temps = {};

    var url = "studentTemp";

    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}]}]}];

    if(temps[url]) {

        var tmpl = $.templates(temps[url]);

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

    } else {

        $.ajax({

            url: "render_seg.html", //这里是静态页的地址

            type: "GET", //静态页用get方法，否则服务器会抛出405错误

            success: function (data) {

                temps[url] = data;

                var tmpl = $.templates(temps[url]);

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

            }

        });

    }

</script>

</body>

</html>

其效果和内嵌模板完全相同，不过更加的干净。

javascript模板库jsrender加载并缓存外部模板文件的更多相关文章

  1. 解决HTML加载时，外部js文件引用较多，影响页面打开速度问题

    解决HTML加载时,外部js文件引用较多,影响页面打开速度问题   通常HTML文件在浏览器中加载时,浏览器都会按照<script>元素在页面中出现的先后顺序,对它们依次加载,一旦加载的j ...

  2. 第一百四十一节，JavaScript，封装库--DOM加载

    JavaScript,封装库--DOM加载 DOM加载,跨浏览器封装DOM加载,当网页文档结构加载完毕后执行函数,不等待图片音频视频等文件加载完毕 /** dom_jia_zai()函数,DOM页面加 ...

  3. js的动态加载、缓存、更新以及复用（四）

    本来想一气呵成,把加载的过程都写了,但是卡着呢,所以只好在分成两份了. 1.页面里使用<script>来加载 boot.js . 2.然后在boot.js里面动态加载 bootLoad.j ...

  4. js的动态加载、缓存、更新以及复用（一）

    使用范围: OA.MIS.ERP等信息管理类的项目,暂时不考虑网站. 遇到的问题: 完成一个项目,往往需要引用很多js文件,比如jQuery.js.easyUI等.还有自己写的一些列js文件,那么这些 ...

  5. Android图片加载与缓存开源框架：Android Glide

    <Android图片加载与缓存开源框架:Android Glide> Android Glide是一个开源的图片加载和缓存处理的第三方框架.和Android的Picasso库类似,个人感觉 ...

  6. js的动态加载、缓存、更新以及复用

    使用范围: OA.MIS.ERP等信息管理类的项目,暂时不考虑网站. 遇到的问题: 完成一个项目,往往需要引用很多js文件,比如jQuery.js.easyUI等.还有自己写的一些列js文件,那么这些 ...

  7. Javascript兑现图片预加载【回调函数，多张图片】 (转载)

    Javascript实现图片预加载[回调函数,多张图片] 使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果.此时程序中就会涉及多 ...

  8. iis发布后模板字体不能加载的解决方案

    在使用ace模板的过程中就曾遇到过图标不显示的情况, 1.在iis和vs运行都不能显示图标,添加缺失的字体库后可以访问 2.把项目签入到阿里云时再一次失效,解决方法是添加Mime类型 .woff  a ...

  9. [翻译]Bitmap的异步加载和缓存

    内容概述 [翻译]开发文档:android Bitmap的高效使用 本文内容来自开发文档"Traning > Displaying Bitmaps Efficiently", ...

随机推荐

  1. 【java并发】传统线程技术中创建线程的两种方式

    传统的线程技术中有两种创建线程的方式:一是继承Thread类,并重写run()方法:二是实现Runnable接口,覆盖接口中的run()方法,并把Runnable接口的实现扔给Thread.这两种方式 ...

  2. XML学习笔记6——XPath语言

    在上一篇笔记的结尾,我们接触到了两个用于选择XML文档中特定范围的元素<selector>和<field>,这两个元素的取值都是XPath表达式,那么,什么是XPath呢?简单 ...

  3. Python之函数与变量

    本节内容 函数介绍及其作用 函数的定义与调用 函数的参数说明 全局变量与局部变量 值传递和引用传递 一.函数的介绍及其作用 编程语言中的函数与数学中的函数是有区别的:数学中的函数有参数(输入),就会有 ...

  4. web工作流

    web工作流之Gulp学习 Gulp.js 是一个自动化构建工具,开发者可以使用它在项目开发过程中自动执行常见任务. Gulp.js 是基于 Node.js 构建的,利用 Node.js 流的威力,你 ...

  5. JS原生第四篇 （帅哥）

      1.1  1. 循环 for(初始化; 退出条件; 增量)  {  } while(退出条件) {     } do {  语句 }  while(退出条件) 2. switch( )   多选1 ...

  6. 分享10条Visual Studio 2012的开发使用技巧

    使用Visual Studio 2012有一段时间了,并不是追赶潮流,而是被逼迫无可奈何.客户要求的ASP.NET MVC 4的项目,要用.NET 4.5来运行.经过一段时间的摸索,得到一点经验和体会 ...

  7. JSP网站开发基础总结《八》

    JSP的学习总结到本篇已经八篇了,内容比较多,但都是实战,本篇最后为大家介绍一个小效果:百度分页.就是当我们遍历的数据对象较多时,这时我们就会看到了这个效果了,那他是如何实现的呢?下面我们就一起学习一 ...

  8. codeforces Gargari and Permutations(DAG+BFS)

    /* 题意:求出多个全排列的lcs! 思路:因为是全排列,所以每一行的每一个数字都不会重复,所以如果有每一个全排列的数字 i 都在数字 j的前面,那么i, j建立一条有向边! 最后用bfs遍历整个图, ...

  9. Yii的学习(3)--查询生成器 (Query Builder)

    原文地址:http://www.yiiframework.com/doc/guide/1.1/en/database.query-builder 不过原文是英文的,Yii的官网没有翻译这一章,自己就尝 ...

  10. [转载]基于TFS实践敏捷-修复Bug和执行代码评审

    本主题阐释了这些功能,以继续这一关注虚拟敏捷团队成员的一天的教程. Peter 忙于编写一些代码以完成积压工作 (backlog) 项任务.但是,他的同事发现了一个阻碍他们工作的 Bug,他想立即修复 ...