javascript模板引擎之artTemplate 学习笔记

<div id="content"></div>
<div id="content1"></div>
<h1>在javascript中存放模板</h1>
<div id="content2"></div>
<div id="content3"></div>
<h1>辅助方法</h1>
<div id="content4"></div>
<!-- test -->
<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
{{each list as value i}}
<li>索引 {{i + 1}}:{{value}}</li>
<!--<li>索引 {{i + 1}}:{{#value}}</li>--> //加#就不原样输出，会执行标签
{{/each}}
</ul>
</script>

<script>
var data = {
title:'标签',
list:['<b>文艺</b>','博客','摄影','电影','民谣','旅行','吉他']
};
var html = template('test',data);
document.getElementById('content').innerHTML = html;
</script>

<!-- test1 -->
<script id="test1" type="text/html">
<p>不转义：{{#value}}</p>
<p>默认转义：{{value}}</p>
</script>

<script>
var data = {
value:'<span style="color:#f00">Hello World!</span>'
};
var html = template('test1',data);
document.getElementById('content1').innerHTML = html;
</script>

<!-- test2 -->
<script>
var source ='<p>{{title1}}</p>' + '<ul>'+
'{{each list as value i}}'+
'<li>索引{{i + 1}}：{{value}}</li>'+
'{{/each}}'+
'</ul>';

var render = template.compile(source);
var html = render({
title1:'模板方式',
list:['摄影','电影','民谣','旅行','吉他']
});
document.getElementById('content2').innerHTML = html;
</script>

<!-- test3 -->
<script id="test2" type="text/html">
<h1>{{title}}</h1>
{{include 'list'}}

</script>

<script id="list" type="text/html">
<ul>
{{each list as value i}}
<li>索引{{i + 1}}：{{value}}</li>
{{/each}}
</ul>
</script>

<script>
var data = {
title:'嵌入子模板',
list: ['文艺', '博客', '摄影', '电影', '民谣', '旅行', '吉他']
};
var html = template('test2',data);
document.getElementById('content3').innerHTML = html;
</script>

<!-- test4 -->
<script id="test3" type="text/html">
{{time | dateFormat:'yyyy年 MM月 dd日 hh:mm:ss'}}
</script>
<script>
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('test3',data);
document.getElementById('content4').innerHTML = html;
</script>

<script>
var a = Math.floor(100.5);
alert(a);
</script>