总监的代码用的是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来异步渲染数据的的更多相关文章

  1. 我是这样使用template.js来异步渲染数据的demo

    直接来代码吧! <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <t ...

  2. template.js文档

    参见GitHub:https://github.com/yanhaijing/template.js/ template.js简介: template.js 一款javascript模板引擎,简单,好 ...

  3. 出位的template.js 基于jquery的模板渲染插件

    找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...

  4. template.js 数据渲染引擎

    template.js 数据渲染引擎 template.js是一款JavaScript模板引擎,用来渲染页面的. 原理:提前将Html代码放进编写模板 <script id="tpl& ...

  5. js模板(template.js)实现页面动态渲染

    template.js是由纯JavaScript编写的第三方模板引擎.点击https://github.com/yanhaijing/template.js可进行下载. 在页头导入模板文件 <s ...

  6. vue 异步渲染

    <!DOCTYPE html> <html> <head> <title> hello world vue </title> <met ...

  7. 关于vue.js中列表渲染练习

    html: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8 ...

  8. 从壹开始前后端分离 [ vue + .netcore 补充教程 ] 二九║ Nuxt实战:异步实现数据双端渲染

    回顾 哈喽大家好!又是元气满满的周~~~二哈哈,不知道大家中秋节过的如何,马上又是国庆节了,博主我将通过三天的时间,给大家把项目二的数据添上(这里强调下,填充数据不是最重要的,最重要的是要配合着让大家 ...

  9. 从父子组件的mounted钩子的同步执行与页面的异步渲染看nextTick的用法

    最近复习vue的时候遇到了一个很奇怪的问题,我们直接从实例中看: <div id="app"> <child ref="child">& ...

随机推荐

  1. 一道sql面试题(查询语句)

    一道sql面试题(查询语句)   id name age 1  a        11 2  b        11 3  c        12 4  d        13 5  e        ...

  2. beanutils中类型转换

    public void doPost(HttpServletRequest request, HttpServletResponse response)            throws Servl ...

  3. Akka入门实例

    Akka入门实例 Akka 是一个用 Scala 编写的库,用于简化编写容错的.高可伸缩性的 Java 和 Scala 的 Actor 模型应用. Actor模型并非什么新鲜事物,它由Carl Hew ...

  4. win7 64位iis发生错误w3wp.exe解决方法

    服务器为64的,遇到iis错误w3wp.exe 于是百度,网上说的修改iis权限和修改注册表都不行,后来在msdn上找到解决方法,如下所示 设置iis程序集如下即可

  5. C#的匿名委托 和 Java的匿名局部内部类

    .NET:C#的匿名委托 和 Java的匿名局部内部类 目录 背景实验备注 背景返回目录 这几天重温Java,发现Java在嵌套类型这里提供的特性比较多,结合自身对C#中匿名委托的理解,我大胆的做了一 ...

  6. IOS学习之路十(仿人人滑动菜单Slide-out Sidebar Menu)

    最近滑动菜单比较流行,像facebook和人人等都在使用滑动菜单,今天做了一个小demo大体效果如下: 这次用了一个开源的项目ECSlidingViewController这个也是一个挺著名的托管在G ...

  7. VS2003与Win7的兼容性问题

    VS2003并不官方支持Win7,目前大家遇到的主要是两个问题: 1. 在debug的时候,*.pdb文件在会被devenv.exe给lock住,当调适过一次之后,再进行编译的时候会有lnk1201的 ...

  8. kindeditor使用方法

    一.下载编辑器 下载KindEditor最新版本(本版本为4.1.10) 下载页面:http://kindeditor.net/down.php 二.部署编辑器 解压kindeditor-x.x.x. ...

  9. 安装Theano

    参考文档 http://deeplearning.net/software/theano/install_centos6.html#install-centos6 安装依赖库 sudo yum ins ...

  10. Play 起步

    *****************jdk下载地址: http://download.oracle.com/otn-pub/java/jdk/7u79-b15/jdk-7u79-linux-x64.ta ...