artTemplate访问外部公用函数（二）

最新推荐文章于 2023-11-22 16:55:50 发布

一个人也很酷

最新推荐文章于 2023-11-22 16:55:50 发布

阅读量5.4k

点赞数

分类专栏： WEB 文章标签： artTemplate 模板引擎 js

本文链接：https://blog.csdn.net/woai671/article/details/48654769

版权

WEB 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

有时候我们的Json数据不能直接显示，还需要通过其他函数进行转换处理才能正常显示，这里就涉及到了访问外部函数。

先给出官方实例：

<!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文件中完成整个过程的实例：

html代码

<!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>

js代码

$(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 (参数) {
              //处理过程
             //处理完返回值
});

一个人也很酷

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
artTemplate访问外部公用函数（二）

有时候我们的Json数据不能直接显示，还需要通过其他函数进行转换处理才能正常显示，这里就涉及到了访问外部函数。先给出官方实例：helper-demo辅助方法年 MM月 dd日 hh:mm:ss')%>/** * 对日期进行格式化， * @param date 要格式化的日期 * @param format 进行格式化的模式字符串 *
复制链接

扫一扫