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;