var iBox = {
/**
* render
* 取值:<%= variable %>
* 表达式:<% if {} %>
* 例子:
* <div>
* <div class="weui-mask"></div>
* <div class="weui-dialog">
* <% if(typeof title === 'string'){ %>
* <div class="weui-dialog__hd"><strong class="weui-dialog__title"><%=title%></strong></div>
* <% } %>
* <div class="weui-dialog__bd"><%=content%></div>
* <div class="weui-dialog__ft">
* <% for(var i = 0; i < buttons.length; i++){ %>
* <a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_<%=buttons[i]['type']%>"><%=buttons[i]['label']%></a>
* <% } %>
* </div>
* </div>
* </div>
* A very simple template engine
* @param {String} tpl
* @param {Object=} data
* @returns {String}
*/
render: function (tpl, data) {
var code = 'var p=[];with(this){p.push(\'' +
tpl
.replace(/[\r\t\n]/g, ' ')
.split('<%').join('\t')
.replace(/((^|%>)[^\t]*)'/g, '$1\r')
.replace(/\t=(.*?)%>/g, '\',$1,\'')
.split('\t').join('\');')
.split('%>').join('p.push(\'')
.split('\r').join('\\\'')
+ '\');}return p.join(\'\');';
return new Function(code).apply(data);
}
};
使用实例:
<script type="text/template" id="billListTpl">
<%
for(var i=0; i<discoveredList.length; i++) {
var item = discoveredList[i];
%>
<a class="weui-cell" href="javascript:;"
data-state="<%=helper.stateFormat(item.status)%>"
data-status="<%=item.status%>"
data-orderNo="<%=item.orderNo%>"
data-bankName="<%=item.bankName%>"
data-tradeAmount="<%=item.tradeAmount%>"
data-tradeTime="<%=item.tradeTime%>"
>
<div class="weui-cell__bd">
<div class="title"><%=item.bankName%></div>
<p class="desc"><%=item.tradeTime%></p>
</div>
<div class="weui-cell__ft">
<div class="title">+<%=helper.tradeAmountFormat(item.tradeAmount)%>元</div>
<p class="status"><%=helper.statusFormat(item.status)%></p>
</div>
</a>
<% } %>
</script>
billListTpl = $("#billListTpl").text()
$container.empty().html(iBox.render(billListTpl, $.extend({helper:helper}, resp)));