-
Notifications
You must be signed in to change notification settings - Fork 2
/
test.html
91 lines (87 loc) · 2.37 KB
/
test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>whisker.js test demo</title>
<script type="text/javascript" src="whisker.js"></script>
</head>
<body>
<script type="text/html" data="{
type:'作品',
items:[
{name:'作品A',list:[2000,2001,2002]},
{name:'作品B',list:[2004,2005,2006]},
{name:'作品C',list:[]},
{name:'作品D',list:[2012,2013,2014]}
],
func:function(year,b,c){
return b+(year+c);
}
}" id="tmpl_1">
{#if $type=='作品'}
<h1>{$type}</h1>
<div class="content">
{#each $items($index=>$item)}
<div class="item">
{$item.name}
{#if $index<3}TOP{$index}
{/if}
</div>
{#if $item.list.length>0}
<ul>
{#each $item.list}
<li>{$}{@func($,'+2=',2)}</li>
{/each}
</ul>
{#else}
<span>empty list!</span>
{/if}
{/each}
</div>
</script>
<div id="lcd"></div>
<script type="text/html" data="{abc:'<div>',list:['<abc>',1,3,4]}" id="tmpl_2">
<div>123{$abc}</div>
{#each $list}
<span>{$~}</span>
{/each}
</script>
<script type="text/html" data="{abc:3,$num:2}" id="tmpl_3">
{%$abc-1*$num}
</script>
<script type="text/html" data="{abc:3,$num:2}" id="tmpl_4">
{#each $}
<li>{<$type}</li>
{/each}
</script>
<script type="text/javascript">
var $=function(id){
return document.getElementById(id).innerHTML;
};
var scripts=document.querySelectorAll('script[type="text/html"]');
var html={};
for(var i=0;i<scripts.length;i++){
var id=scripts[i].id;
var exp='('+scripts[i].getAttribute('data')+')';
exp=exp.replace(/\n/g,'');
var data=eval(exp)||{};
console.time(i);
html[i]=html[id]=Whisker.render($(id),data);
console.timeEnd(i);
}
console.log(html);
var x=Whisker.render('{#each $}<li>{<b}</li>{/each}',[
{type:'a',name:'ooxx',list:[1,2,3]},
{type:'b',name:'coc',list:[4,6]}
],
{
'a':'{$name}',
'b':'{<a}',
'p-c':'{#each $list}<b>{$}</b>{/each}'
});
Whisker.setDelimeter('<?php','?>');
var str=Whisker.renderSimple('<div><?php$abc?></div>',{abc:'exolution'});
console.log(str);
</script>
</body>
</html>