專案中遇到的模板方法總結。tmpl
原始方法。
編寫html的模板。其中<%%>表示識別符號，後續可以處理js的事情，data為後續函式繫結的資料值。
billQueryProto.detailTemplate = function () {
//8 表示日期，預設解析兩個，開始時間和結束時間。
return '<div class="billquery-content-filter">'
+ ' <form action="#">'
+ ' <div class="billquery-content-first">'
+ ' </div>'
+ ' <%for (var i=0; i<data.length;i++) { var item = data[i];%> '
+ ' <%if(item.FColType =="8" ) {%>'
+ ' <div class="billquery-content-filter-li-date"> '
+ ' <%var ColCaptio = item.FColCaption.split("^"); var DisplayContent = item.FDisplayContent.split("^"); %>'
+ ' <%for (var j=0;j<ColCaptio.length; j++) {%> '
+ ' <label data-key="<%=item.FColName%>" class="ui-nowrap-label"> '
+ ' <%=ColCaptio[j]%>'
+ ' </label> '
+ ' <input data-key="<%=item.FColName%>" data-type="<%=item.FColType%>" data-lookupcls = "-1" data-valuekey="<%=item.FValue%>" disabled <%if (DisplayContent[j]!=""||DisplayContent[j]!=null||DisplayContent[j]!=undefined)
{ %> value="<%=DisplayContent[j]%>" <%}else {%> value <%}%> > '
+ ' </input> '
+ ' <%}%> '
+ ' </div>'
+ ' <%}else if(item.FColType =="16" && item.FItemClassID !="-1") {%>'
+ ' <div class="billquery-content-filter-li"> '
+ ' <label data-key="<%=item.FColName%>" class="ui-nowrap-label"> '
+ ' <%=item.FColCaption%>'
+ ' </label> '
+ ' <input data-key="<%=item.FColName%>" data-type="<%=item.FColType%>" data-lookupcls ="<%=item.FItemClassID%>" data-valuekey="<%=item.FValue%>" disabled <%if (item.FDisplayContent!=""||item.FDisplayContent!=null|item.FDisplayContent!=undefined)
{ %> value="<%=item.FDisplayContent%>" <%}else {%> value <%}%> > '
+ ' </input> '
+ ' </div>'
+ ' <%}else if(item.FColType =="2") {%>'
+ ' <div class="billquery-content-filter-li"> '
+ ' <label data-key="<%=item.FColName%>" class="ui-nowrap-label"> '
+ ' <%=item.FColCaption%>'
+ ' </label> '
+ ' <input type ="number" data-key="<%=item.FColName%>" data-type="<%=item.FColType%>" data-lookupcls ="<%=item.FItemClassID%>" data-valuekey="<%=item.FValue%>" <%if (item.FDisplayContent!=""||item.FDisplayContent!=null|item.FDisplayContent!=undefined)
{ %> value=<%=item.FDisplayContent%> <%}else {%> value <%}%> > '
+ ' </input> '
+ ' </div>'
+ ' <%}else{%>'
+ ' <div class="billquery-content-filter-li"> '
+ ' <label data-key="<%=item.FColName%>" class="ui-nowrap-label"> '
+ ' <%=item.FColCaption%>'
+ ' </label> '
+ ' <input data-key="<%=item.FColName%>" data-type="<%=item.FColType%>" data-lookupcls ="<%=item.FItemClassID%>" data-valuekey="<%=item.FValue%>" <%if (item.FDisplayContent!=""||item.FDisplayContent!=null|item.FDisplayContent!=undefined)
{ %> value="<%=item.FDisplayContent%>" <%}else {%> value <%}%> > '
+ ' </input> '
+ ' </div>'
+ ' <%}%>'
+ ' <%}%>'
+ ' </form>'
+ '</div>';
};
var filterTemplate = scope.detailTemplate();
//獲取快取
var mydata = scope.FilterData;
var FilterTemplate = $s.html2dom(filterTemplate.tmpl(mydata));
//需要的只是，正則表示式，eval的使用方法，模板引擎等概念。
var html2dom = function (html) {
var div = document.createElement('div');
div.innerHTML = html;
return div.firstElementChild;
};
function tmpl(_t, data) {
var _data = [],v = {};
v.last = _t.replace(/([\s\S]*?)(?:<%((?:\=|\$\/)?)([\s\S]*?)%>)/g, function (m, s, t, c, i) {
v["s_" + i] = s;
_data.push("res.push(v.s_" + i + ");");
if (t === "=") {
_data.push("res.push(" + c.trim() + ");");
} else {
_data.push(c.trim());
}
return "";
});
try {
var _ = new Function("data", "res", "v", _data.join("") + "res.push(v.last);return String.prototype.concat.apply('', res);").toString();
return eval("(" + _ + ")")(data || {}, [], v);
} catch (e) {
console.error("Template Error.", e);
console.log(_);
}