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;