编写模板
<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}} ：{{value}}</li>
{{/each}}</ul>
</script>
渲染模板
var data = {
title: '标签',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test', data);
document.getElementById('content').innerHTML = html;
简介语法
{{if admin}}
{{include 'admin_content'}}
{{each list}}
<div>{{$index}}. {{$value.user}}</div>
{{/each}}
{{/if}}
方法
template(id,data)
- 根据id渲染模板，内部会根据document.getElementById(id)查找模板。
- 如果没有data参数，将会返回一渲染函数。
template.compile(source,options)
var source = '<ul>'
'{{each list as value i}}'
'<li>索引 {{i + 1}} ：{{value}}</li>'
'{{/each}}'
'</ul>';
var render = template.compile(source);
var html = render({
list: ['摄影', '电影', '民谣', '旅行', '吉他']
});
document.getElementById('content').innerHTML = html;
template.render(source,options) 将返回渲染结果
template.helper(name,callback) 添加辅助方法。
<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>
template.config(name.value)更改引擎的默认设置
详情请看 http://www.jq22.com/jquery-info1097
