mui 由於需要使用ajax與后端交互,前端大量頁面動態頁面如果使用拼接字符串的方式相當費事,最近找到了一個template這個前端的模板,使用這個模板似的頁面的動態加載相當輕松.
首先是要引入template-native.js 這個文件,這個自己百度有的下載我用是3.0的版本.
js代碼:
var data={
arr:[]
};
mui.plusReady(function(){
var cart=plus.storage.getItem('cart'); //獲取緩存中的數據 1.ajaj獲取服務器發來的數據.2.是從storage 中獲取的數據
var cartj=JSON.parse(cart); //將字符串解析成json對象
data.arr=cartj; //將對象保存在事先准備好的數組中
var sHtml=template('tpl',data); //將數據發送給模板,tpl是模板id
document.getElementById('addCart').innerHTML=sHtml; //獲取html頁面中事先准備好的盒子,將模板寫入盒子
})
模板代碼;
<script type="text/html" id="tpl"> //html頁面中的script 標簽 type類型是text/html
<%for(var i=0;i<arr.length;i++){%> //語法與jsp的el表達式差不多 這樣通過for循環就可以將data中的數據寫入到html頁面中去了
<ul class="mui-table-view">
<li><%=arr[i].ypmc%></li>
</ul>
<%}%>
</script>
2017年9月13日更新
上面是在html中寫的,官方也是給出的這個實例,如果想寫在js文件中,需要把模板封裝在變量中
//將模板封裝在變量中寫法跟script標簽中的一樣
var lst = '<%for(var i=0;i<arr.length;i=i+2){%>' +
'<ul class="mui-table-view mui-grid-view" id="ul" style="text-align: center;">' +
'<li class="mui-table-view-cell mui-media mui-col-xs-5 cx_list">' +
'<a href="#">' +
'<img class="mui-media-object" src="../../images/merchandise.jpg">' +
'<div class="mui-media-body">' +
'<%=arr[i].ypmc%>' +
'</div>' +
'<div class="mui-media-body" style="color: red;">¥<span><%=arr[i].jg%></span></div>' +
'</a>' +
'</li>' +
'</ul>' +
'<%}%>';
//調用compile函數進行渲染返回的是一個仍然是一個函數
var render = template.compile(lst);
//將數據傳遞給這個函數
var html = render(data);
//html頁面寫入頁面
document.getElementById('cx_lst').innerHTML = html;