javascript模板库jsrender加载并缓存外部模板文件
2023-09-27 14:28:34 时间
前一篇说了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生成随机数
- JavaScript脚本注入,完成Selenium 无法做到的那些事
- javascript操作写入txt文件及消息: Automation 服务器不能创建对象问题
- 使用 JavaScript 的 HTML 页面混合、JavaScript 文件引用和 HTML 代码嵌入 3 种方式在 HTML 页面上打印出“点击我进入到百度首页”的超链接
- 《JavaScript设计模式》学习记录
- 前端回顾:2016年 JavaScript 之星
- Javascript 键盘事件
- Cordova下android与javascript的交互
- javascript中的toString()方法
- 分析内存使用情况 (JavaScript)
- JavaScript(WebAPI)
- javascript文件加载模式与加载方法
- 深入理解javascript原型和闭包(完结)
- 50道JavaScript基础面试题(附答案)
- 【JavaScript】JS读取XML文件并进行搜索
- 我的Android进阶之旅------>Android中使用HTML作布局文件以及调用Javascript