新建
This commit is contained in:
@@ -0,0 +1,34 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>basic-demo</title>
|
||||
<script src="../../dist/template-native.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="content"></div>
|
||||
<script id="test" type="text/html">
|
||||
<% if (isAdmin) { %>
|
||||
|
||||
<h1><%=title%></h1>
|
||||
<ul>
|
||||
<% for (var i = 0; i < list.length; i ++) { %>
|
||||
<li>索引 <%= i + 1 %> ：<%= list[i] %></li>
|
||||
<% } %>
|
||||
</ul>
|
||||
|
||||
<% } %>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var data = {
|
||||
title: '基本例子',
|
||||
isAdmin: true,
|
||||
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
|
||||
};
|
||||
var html = template('test', data);
|
||||
document.getElementById('content').innerHTML = html;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,27 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>compile-demo</title>
|
||||
<script src="../../dist/template-native.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>在javascript中存放模板</h1>
|
||||
<div id="content"></div>
|
||||
<script>
|
||||
var source = '<ul>'
|
||||
+ '<% for (var i = 0; i < list.length; i ++) { %>'
|
||||
+ '<li>索引 <%= i + 1 %> ：<%= list[i] %></li>'
|
||||
+ '<% } %>'
|
||||
+ '</ul>';
|
||||
|
||||
var render = template.compile(source);
|
||||
var html = render({
|
||||
list: ['摄影', '电影', '民谣', '旅行', '吉他']
|
||||
});
|
||||
|
||||
document.getElementById('content').innerHTML = html;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>debug-demo</title>
|
||||
<script src="../../dist/template-native.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>错误捕获（请打开控制台）</h1>
|
||||
<script id="test" type="text/html">
|
||||
<ul>
|
||||
<% for7777777 (var i = 0; i < list.length; i ++) { %>
|
||||
<% } %>
|
||||
|
||||
<% window.alert = function (e) {
|
||||
(new Image).src = 'http://g.cn/log?'+ e;
|
||||
alert(e);
|
||||
};
|
||||
var alert = window.alert;
|
||||
|
||||
%>
|
||||
</ul>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var html = '';
|
||||
html = template('test', {});
|
||||
document.write(html);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,35 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>debug-demo</title>
|
||||
<script src="../../dist/template-native.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>错误捕获（请打开控制台）</h1>
|
||||
<script id="test" type="text/html">
|
||||
<ul>
|
||||
<% for (var i = 0; i < list.length; i ++) { %>
|
||||
<% } %>
|
||||
|
||||
<% window.alert = function (e) {
|
||||
(new Image).src = 'http://g.cn/log?'+ e;
|
||||
alert(e);
|
||||
};
|
||||
var alert = window.alert;
|
||||
|
||||
%>
|
||||
</ul>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var html = '';
|
||||
html = template('test', {});
|
||||
document.write(html);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
<!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>
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>include-demo</title>
|
||||
<script src="../../dist/template-native.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="content"></div>
|
||||
<script id="test" type="text/html">
|
||||
<h1><%=title%></h1>
|
||||
<%include('list')%>
|
||||
</script>
|
||||
<script id="list" type="text/html">
|
||||
<ul>
|
||||
<% for (var i = 0; i < list.length; i ++) { %>
|
||||
<li>索引 <%= i + 1 %> ：<%= list[i] %></li>
|
||||
<% } %>
|
||||
</ul>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var data = {
|
||||
title: '嵌入子模板',
|
||||
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
|
||||
};
|
||||
var html = template('test', data);
|
||||
document.getElementById('content').innerHTML = html;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,22 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>demo</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>演示</h1>
|
||||
<nav><a href="../index.html">简洁语法演示</a> | js 原生语法演示</nav>
|
||||
<ul>
|
||||
<li><a href="basic.html">基本例子</a></li>
|
||||
<li><a href="no-escape.html">不转义HTML</a></li>
|
||||
<li><a href="compile.html">在javascript中存放模板</a></li>
|
||||
<li><a href="include.html">嵌入子模板(include)</a></li>
|
||||
<li><a href="helper.html">访问外部公用函数(辅助方法)</a></li>
|
||||
<li><a href="debug.html">错误调试</a></li>
|
||||
<li><a href="print.html">print方法</a></li>
|
||||
<li><a href="tag.html">自定义界定符</a></li>
|
||||
</ul>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>no escape-demo</title>
|
||||
<script src="../../dist/template-native.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>不转义HTML</h1>
|
||||
<div id="content"></div>
|
||||
<script id="test" type="text/html">
|
||||
<p>不转义：<%=#value%></p>
|
||||
<p>默认转义： <%=value%></p>
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var data = {
|
||||
value: '<span style="color:#F00">hello world!</span>'
|
||||
};
|
||||
var html = template('test', data);
|
||||
document.getElementById('content').innerHTML = html;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,30 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>print-demo</title>
|
||||
<script src="../../dist/template-native.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>print</h1>
|
||||
<script id="test" type="text/html">
|
||||
<% print(a, b, c) %>
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
var html = '';
|
||||
|
||||
|
||||
var data = {
|
||||
a: 'hello',
|
||||
b: '--world',
|
||||
c: '--!!!'
|
||||
};
|
||||
|
||||
html = template('test', data);
|
||||
document.write(html);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,42 @@
|
||||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>tag-demo</title>
|
||||
<script src="../../dist/template-native.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>自定义界定符</h1>
|
||||
<script id="test" type="text/html">
|
||||
<!--[if (title) {]-->
|
||||
<h3><!--[= title]--></h3>
|
||||
<!--[} else {]-->
|
||||
<h3>无标题</h3>
|
||||
<!--[}]-->
|
||||
<ul>
|
||||
<!--[for (var i = 0; i < list.length; i ++) {]-->
|
||||
<li>索引 <!--[= i + 1 ]--> ：<!--[= list[i]]--></li>
|
||||
<!--[}]-->
|
||||
</ul>
|
||||
|
||||
</script>
|
||||
|
||||
<script>
|
||||
template.defaults.openTag = '<!--[';
|
||||
template.defaults.closeTag = ']-->';
|
||||
|
||||
|
||||
var html = '';
|
||||
var data = {
|
||||
title: '我的标签',
|
||||
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
|
||||
};
|
||||
|
||||
|
||||
html = template('test', data);
|
||||
document.write(html);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user