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

前一篇说了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加载并缓存外部模板文件相关推荐

flash调用swf文件服务器,FLASH如何加载(调用）外部SWF文件
这久遇到要在FLASH里面调用外部的SWF文件,在网上找了好久,介绍可是真多啊,用了快一天时间才学会!原来很简单,只不过走了很多弯路!现把方法介如下,希望后来人能少走些弯路! (转贴) 做FLASH站 ...
解决HTML加载时，外部js文件引用较多，影响页面打开速度问题
前言通常HTML文件在浏览器中加载时,浏览器都会按照<script>元素在页面中出现的先后顺序,对它们依次加载,一旦加载的js文件数量过多,就会导致页面展示延迟.那么,在开发的过程中,改 ...
react 引入html文件_javascript – React：如何加载和呈现外部html文件？
我看到它的方式是你要解决2个问题.第一个是如何在React中设置元素的innerHTML.另一种是如何根据给定变量(例如当前路线,文本字段的输入等)来获取要呈现的特定HTML. 1.设置元素的inne ...
第一百四十一节，JavaScript，封装库--DOM加载
JavaScript,封装库--DOM加载 DOM加载,跨浏览器封装DOM加载,当网页文档结构加载完毕后执行函数,不等待图片音频视频等文件加载完毕 /** dom_jia_zai()函数,DOM页面加 ...
Android平滑图片加载和缓存库 Glide 使用详解
版权声明:本文原创作者:一叶飘舟作者博客地址:http://blog.csdn.net/jdsjlzx 一.简介在泰国举行的谷歌开发者论坛上,谷歌为我们介绍了一个名叫 Glide的图片加载库,作者 ...
js的动态加载、缓存、更新以及复用（四）
本来想一气呵成,把加载的过程都写了,但是卡着呢,所以只好在分成两份了. 1.页面里使用<script>来加载 boot.js . 2.然后在boot.js里面动态加载 bootLoad.j ...
ajax动态拼接复选框样式,JavaScript 通过Ajax 动态加载CheckBox复选框
废话不多说了,直接给大家贴代码了,具体代码如下所示: //动态加载年份checkbox by dongch 20170830 function GetCompareYearByStationName( ...
把共享库(SO)加载到指定的内存地址
一位朋友最近遇到一个棘手的问题,希望把共享库(SO)加载到指定的内存地址,目的可能是想通过prelink来加快应用程序的起动速度.他问我有没有什么方法.我知道Windows下是可以的,比如在VC6里设 ...
ListView中的图片异步加载、缓存
一.ListView的图片异步加载我们都知道对每一个Weibo Item都有用户头像,而且每一条微博还可能带有图片.如果在加载列表的同时加载图片,这样有几个缺点,第一很费事,界面卡住,用户体验很不好 ...

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

javascript模板库jsrender加载并缓存外部模板文件相关推荐

最新文章

热门文章