artTemplate訪問外部公用函式（二）
阿新 • • 發佈：2019-01-25
有時候我們的Json資料不能直接顯示，還需要通過其他函式進行轉換處理才能正常顯示，這裡就涉及到了訪問外部函式。
先給出官方例項：
官方的例項是在HTML頁面檔案中完成的，下面給出在Js檔案中完成整個過程的例項：<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>helper-demo</title> <script src="../../dist/template-native.js"></script> </head> <body> <h1>輔助方法</h1> <div id="content"></div> <script id="test" type="text/html"> <%=dateFormat(time, 'yyyy<b>年</b> MM月 dd日 hh:mm:ss')%> </script> <script> /** * 對日期進行格式化， * @param date 要格式化的日期 * @param format 進行格式化的模式字串 * 支援的模式字母有： * y:年, * M:年中的月份(1-12), * d:月份中的天(1-31), * h:小時(0-23), * m:分(0-59), * s:秒(0-59), * S:毫秒(0-999), * q:季度(1-4) * @return String * @author yanis.wang * @see http://yaniswang.com/frontend/2013/02/16/dateformat-performance/ */ template.helper('dateFormat', function (date, format) { date = new Date(date); var map = { "M": date.getMonth() + 1, //月份 "d": date.getDate(), //日 "h": date.getHours(), //小時 "m": date.getMinutes(), //分 "s": date.getSeconds(), //秒 "q": Math.floor((date.getMonth() + 3) / 3), //季度 "S": date.getMilliseconds() //毫秒 }; format = format.replace(/([yMdhmsqS])+/g, function(all, t){ var v = map[t]; if(v !== undefined){ if(all.length > 1){ v = '0' + v; v = v.substr(v.length-2); } return v; } else if(t === 'y'){ return (date.getFullYear() + '').substr(4 - all.length); } return all; }); return format; }); // -------- var data = { time: (new Date).toString(), }; var html = template('test', data); document.getElementById('content').innerHTML = html; </script> </body> </html>
html程式碼
js程式碼<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>helper-demo</title> <script src="../../dist/template-native.js"></script> </head> <body> <h1>輔助方法</h1> <div id="content"></div> </body> </html>
$(function () { var data= '<% for (var i = 0; i < list.length; i ++) { %>' + '<div id="<%=list[i].Unique%>"><div class="list_left">' + '<a href="/xxx.aspx?id=<%=list[i]Unique%>" target="_blank"><%=list[i].title%>'+ '<img src="<%=方法名(list[i].photourl)%>" /></a></div></div>' + '<% } %>'; var render = template.compile(data); var html = render(資料); document.getElementById('content').innerHTML = html; }); template.helper('方法名', function (引數) { //處理過程 //處理完返回值 });