/
demo.html
63 lines (49 loc) · 1.72 KB
/
demo.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
.odd { background : #eef; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="hugs.js"></script>
<script>jQuery(function($){
var o = {
name: "Template demo",
url: "http://borgar.net",
list: [ "One", "Two", "Three", "Four", "Five" ]
};
var tmpl = '<div>\n' +
'<h1><a href="{{= url }}">{{= upper( name ) }}</a></h1>\n' +
'{{ if (list) }}' +
'<ol>\n' +
'{{ each( list ) }}' +
'<li class="{{= each.counter % 2 == 0 ? "odd" : "even" }}">' +
'{{= this }}' +
'</li>\n' +
'{{ end }}' +
'</ol>\n' +
'{{ end }}' +
'</div>';
var t = Template( tmpl );
$( '#one' ).html( t.render( o ) );
var actors = '<li style="background:{{= color }}">' +
'<b>{{= name }}</b>\n' +
'({{= nick }})\n' +
'{{ if ( aka ) }}<em>AKA: {{= aka }}</em>\n{{ end }}' +
'</li>';
var ghosts = [
{ name: "Shadow", nick: "Blinky", color: 'red', aka: "Cruise Elroy" },
{ name: "Speedy", nick: "Pinky", color: 'pink' },
{ name: "Bashful", nick: "Inky", color: 'cyan' },
{ name: "Pokey", nick: "Clyde", color: 'orange' }
];
var s = Template.render( actors, ghosts );
$( '#actors' ).append( $.map( s, function(m){ return $( m )[0]; } ) );
});</script>
</head>
<body class="">
<div id="one"></div>
<ul id="actors"></ul>
</body>
</html>