-
Notifications
You must be signed in to change notification settings - Fork 72
/
preprocessing.html
66 lines (56 loc) · 2.09 KB
/
preprocessing.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
<html>
<head>
<!-- Import Tempo -->
<script type="text/javascript" src="../tempo.min.js"></script>
<!-- This example uses jQuery's ajax() method to retrieve data from Twitter -->
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script>
var data = [
{"type":'java', "name":'guice'},
{"type":'javascript', "name":'jQuery'},
{"type":'java', "name":'guice', "owner":'Google'},
{"type":'php', "name":'django'}
];
$(document).ready(
setTimeout(function () {
var tempo = Tempo.prepare($('ul'), {}, function (template) {
var i = 0;
template.when(TempoEvent.Types.RENDER_STARTING,function (event) {
$(event.element).before('<h2>Before</h2>');
}).when(TempoEvent.Types.ITEM_RENDER_STARTING,function (event) {
if (event.item.type == 'javascript') {
event.item.name += ' is fun!';
}
event.item.even = i++ % 2 ? 'even' : 'odd';
}).when(TempoEvent.Types.RENDER_COMPLETE,function (event) {
$(event.element).after('<h2>After</h2>');
}).render(data);
});
}, 2500)
);
</script>
<style>
li {
padding: 10px;
}
li.even {
background-color: #ddd;
}
</style>
</head>
<body>
<h1>Preprocessing</h1>
<pre>
var data = [
{"type":'java', "name":'guice'},
{"type":'javascript', "name":'jQuery'},
{"type":'java', "name":'guice', "owner":'Google'},
{"type":'php', "name":'django'}
];
</pre>
<ul>
<li data-template-fallback>{{name}}...rendering soon!</li>
<li data-template class="{{even}}" style="display: none;">{{name}}</li>
</ul>
</body>
</html>