<!DOCTYPE html>
<html>
<head>
<title>JavaScript模板引擎</title>
<script type="text/javascript" src="./template-native-debug.js"></script>
</head>
<body>
<!-- 示例1 开始 -->
<div id="content1"></div>
<hr/>
<script id="test1tpl" type="text/html">
<h1><%=title%></h1>
<ul>
<%for(var i = 0; i < list.length; i++) {%>
<li><%=i+1%> <%=list[i]%> <%=window.location.href %></li>
<%}%>
</ul>
</script>
<script type="text/javascript">
var title = "基本例子",
list = ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'];
var html = template('test1tpl', {title: title, list: list, window: window});
document.getElementById('content1').innerHTML = html;
</script>
<!-- 示例1 结束 -->
<!-- 示例2 开始 -->
<div id="content2"></div>
<hr/>
<script id="test2tpl" type="text/html">
<h1><%=title%></h1>
<p>不转义：<%=#value %></p>
<p>转义（默认）：<%=value %></p>
</script>
<script type="text/javascript">
html = template('test2tpl', {title: '不转义HTML', value: '<span style="color:#F00">hello world!</span>'});
document.getElementById("content2").innerHTML = html;
</script>
<!-- 示例2 结束 -->
<!-- 示例3 开始 -->
<div id="content3"></div>
<hr/>
<script type="text/javascript">
var source ="<h1><%=title %></h1>"
+ "<ul>"
+ "<%for(var i = 0; i < list.length; i++) {%>"
+ "<li><%=i+1%> <%=list[i]%></li>"
+ "<%}%>"
+ "</ul>";
var render = template.render(source);
html = render({
title: '在javascript中存放模板',
list: ['摄影', '电影', '民谣', '旅行', '吉他']
});
document.getElementById("content3").innerHTML = html;
</script>
<!-- 示例3 结束 -->
<!-- 示例4 开始 -->
<div id="content4"></div>
<hr/>
<script id="test4tpl" type="text/html">
<h1><%=title%></h1>
<%include('test4tpl_list')%>
</script>
<script id="test4tpl_list" type="text/html">
<ul>
<% for(var j = 0; j < list.length; j++) {%>
<li><%=list[j]%></li>
<%}%>
</ul>
</script>
<script type="text/javascript">
var title = "嵌入子模板",
list = ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他'];
var html = template('test4tpl', {title: title, list: list});
document.getElementById('content4').innerHTML = html;
</script>
<!-- 示例4 结束 -->
<!-- 示例5 开始 -->
<div id="content5"></div>
<script id="test5tpl" type="text/html">
<h1><%=title%></h1>
<%=#dateFormat(time, 'yyyy<b>年</b> MM<b>月</b> dd<b>日</b> 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 = {
title: "辅助方法",
time: (new Date).toString()
};
var html = template('test5tpl', data);
document.getElementById('content5').innerHTML = html;
</script>
<!-- 示例5 结束 -->
</body>
</html>
