mui 中template 的使用

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;