我是这样使用template.js来异步渲染数据的
总监的代码用的是define+module.exports,为了效率先没去了解那一块,在github上找了一款功能单一的template.js来使用
https://github.com/yanhaijing/template.js
很迷你,需要适当封装,比如:
//利用template渲染
//tpl_id:模板id
//div_id:渲染在哪
//data:数据
function render(tpl_id,div_id,data){
var tpl = document.getElementById(tpl_id).innerHTML;
var html=template(tpl, {list: data});
document.getElementById(div_id).innerHTML=html;
}
这里的template就是核心方法了.最简单的页面模块如下,还有很多有定义的写法:
<script id="tpl" type="text/html">
<ul>
<%for(var i = 0; i < list.length; i++) {%>
<li><%:=list[i].name%></li>
<%}%>
</ul>
</script>
比如自定义代码可以用<% %>包裹起来,不需要中括号哈,只是为了区别位置
默认写法:<%=[内容]%>
不转义写法:<%:=[内容]%>
转义写法:<%:h=[内容]%>
url转义:<%:u=[内容]%>
我是用template来做什么呢?
同样是页面内筛选,拒绝多次链接数据库.
之前做静态页面时是将所有数据放入缓存中,之后再从缓存中进行下一步业务逻辑.
个人中心则要考虑到信息的实时变化,同时也不能每次筛选都读取数据库.
一开始想着在php里拼接html再渲染,但是脑子总是离不开用php就要刷新的概念.
其实跟template原理一模一样,一个是在php中拼接,一个是template帮你拼接了.
进入订单页面后从接口中获取订单信息,保存在全局变量中.这个全局变量就是以后筛选的源.
点击不同的标签传入不同的参数,筛选出不同的数据再渲染.注意上面的那个方法是可以复用的哈.
如果不同的数据对应不同的模板,只要在页面中写好不同的模板,然后传入不同的模板id就可以实现多数据多模板的渲染了!
我是这样使用template.js来异步渲染数据的的更多相关文章
- 我是这样使用template.js来异步渲染数据的demo
直接来代码吧! <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...
- template.js文档
参见GitHub:https://github.com/yanhaijing/template.js/ template.js简介: template.js 一款javascript模板引擎,简单,好 ...
- 出位的template.js 基于jquery的模板渲染插件
找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...
- template.js 数据渲染引擎
template.js 数据渲染引擎 template.js是一款JavaScript模板引擎,用来渲染页面的. 原理:提前将Html代码放进编写模板 <script id="tpl& ...
- js模板(template.js)实现页面动态渲染
template.js是由纯JavaScript编写的第三方模板引擎.点击https://github.com/yanhaijing/template.js可进行下载. 在页头导入模板文件 <s ...
- vue 异步渲染
<!DOCTYPE html> <html> <head> <title> hello world vue </title> <met ...
- 关于vue.js中列表渲染练习
html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...
- 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二九║ Nuxt实战:异步实现数据双端渲染
回顾 哈喽大家好!又是元气满满的周~~~二哈哈,不知道大家中秋节过的如何,马上又是国庆节了,博主我将通过三天的时间,给大家把项目二的数据添上(这里强调下,填充数据不是最重要的,最重要的是要配合着让大家 ...
- 从父子组件的mounted钩子的同步执行与页面的异步渲染看nextTick的用法
最近复习vue的时候遇到了一个很奇怪的问题,我们直接从实例中看: <div id="app"> <child ref="child">& ...
随机推荐
- 修改servu数据库密码 servu加密方式
项目要求可以有用户自行修改servu密码.servu可以通过odbc访问access\mysql\sqlserver数据库.我们直接通过创建web来修改就可以了. 不过问题来了,密码是加密的...通过 ...
- javascript模仿块级作用域(第一篇)
作用域有词法作用域和块级作用域之分,javascript属于词法作用域,而在java.C++中却是块级作用域.在javascript中,只有函数能够创建作用域,作用域是以function作为边界的. ...
- GIT+云盘作 做 文档管理工具
GIT+云盘作 做 文档管理工具 在工作中, 会遇到公司的文档 和 自己家里的 文档进行同步的问题, 通常我们使用U盘作为传输节制, 但是不是非常好,文档的改动都不能发现, 导致回家同步的时候, 出各 ...
- 大量Javascript/JQuery学习教程电子书合集
[推荐分享]大量Javascript/JQuery学习教程电子书合集,送给有需要的人 不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小 15天学会jQuery(完整版).pd ...
- HDU 4630、BOJ 某题
两道离线线段树. 比赛时候没想到.... 扫描数组,i从1到n,线段树维护从1到i每一个约数(1~50000)的出现的最近位置,线段树存储的是约数的最大值 #include<cstdio> ...
- C程序设计语言(第二版)习题:第一章
第一章虽然感觉不像是个习题.但是我还是认真去做,去想,仅此而已! 练习 1-1 Run the "hello, world" program on your system. Exp ...
- Linq无聊练习系列1--where练习
linq主要有3种,linq to sql,linq to XML,Linq to Object linq to sql. 这里没有通过相应的类,生成相应的数据库中的表.没有用流行的编码优先. 只是为 ...
- JS图片自动或者手动滚动效果(支持left或者up)
JS图片自动或者手动滚动效果(支持left或者up) JS图片自动或者手动滚动效果 在谈组件之前 来谈谈今天遇到搞笑的事情,今天上午接到一个杭州电话 0571-28001187 即说是杭州人民法院的 ...
- CHD4 impala安装配置
impala基于CHD,提供针对HDFS,hbase的实时查询,查询语句类似于hive 包括几个组件 Clients:提供Hue, ODBC clients, JDBC clients, and th ...
- 运动检测(前景检测)之(二)混合高斯模型GMM
运动检测(前景检测)之(二)混合高斯模型GMM zouxy09@qq.com http://blog.csdn.net/zouxy09 因为监控发展的需求,目前前景检测的研究还是很多的,也出现了很多新 ...