我是这样使用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">& ...
随机推荐
- 一道sql面试题(查询语句)
一道sql面试题(查询语句) id name age 1 a 11 2 b 11 3 c 12 4 d 13 5 e ...
- beanutils中类型转换
public void doPost(HttpServletRequest request, HttpServletResponse response) throws Servl ...
- Akka入门实例
Akka入门实例 Akka 是一个用 Scala 编写的库,用于简化编写容错的.高可伸缩性的 Java 和 Scala 的 Actor 模型应用. Actor模型并非什么新鲜事物,它由Carl Hew ...
- win7 64位iis发生错误w3wp.exe解决方法
服务器为64的,遇到iis错误w3wp.exe 于是百度,网上说的修改iis权限和修改注册表都不行,后来在msdn上找到解决方法,如下所示 设置iis程序集如下即可
- C#的匿名委托 和 Java的匿名局部内部类
.NET:C#的匿名委托 和 Java的匿名局部内部类 目录 背景实验备注 背景返回目录 这几天重温Java,发现Java在嵌套类型这里提供的特性比较多,结合自身对C#中匿名委托的理解,我大胆的做了一 ...
- IOS学习之路十(仿人人滑动菜单Slide-out Sidebar Menu)
最近滑动菜单比较流行,像facebook和人人等都在使用滑动菜单,今天做了一个小demo大体效果如下: 这次用了一个开源的项目ECSlidingViewController这个也是一个挺著名的托管在G ...
- VS2003与Win7的兼容性问题
VS2003并不官方支持Win7,目前大家遇到的主要是两个问题: 1. 在debug的时候,*.pdb文件在会被devenv.exe给lock住,当调适过一次之后,再进行编译的时候会有lnk1201的 ...
- kindeditor使用方法
一.下载编辑器 下载KindEditor最新版本(本版本为4.1.10) 下载页面:http://kindeditor.net/down.php 二.部署编辑器 解压kindeditor-x.x.x. ...
- 安装Theano
参考文档 http://deeplearning.net/software/theano/install_centos6.html#install-centos6 安装依赖库 sudo yum ins ...
- Play 起步
*****************jdk下载地址: http://download.oracle.com/otn-pub/java/jdk/7u79-b15/jdk-7u79-linux-x64.ta ...