我是这样使用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就可以实现多数据多模板的渲染了!