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页面中事先准备好的盒子,将模板写入盒子

})

模板代码;

</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" >¥<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;