我是這樣使用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就可以實現多數據多模板的渲染了!