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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
A tree view control using recursive templates
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A tree view control using recursive templates</title>
<link href="resources/treeView.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Tree View</h1>
<div><ul id="samplesList" class="treeView"><li>Loading...</li></ul></div>
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../../jquery.tmpl.js" type="text/javascript"></script>
<script id="folderTmpl" type="text/x-jquery-tmpl">
<li class="content_${hasContent($item)}">
<img class="expand" src="resources/${expanderImage()}.png" />
<img class="folder" src="resources/folder.png" />
<span>${name}</span>
</li>
{{if expanded}}
<li>
<ul>{{tmpl(getSamples($item)) "#itemTmpl"}}</ul>
<ul>{{tmpl(getFolders($item)) "#folderTmpl"}}</ul>
</li>
{{/if}}
</script>
<script id="itemTmpl" type="text/x-jquery-tmpl">
<li class="folderItem">${name}</li>
</script>
<script type="text/javascript">
// ******************** Data for folders hierarchy, and samples ********************
var folders = {
name: "Samples",
folders: [
{ name: "API", folders: [
{ name: ".tmpl"},
{ name: ".tmplItem" }
]},
{ name: "Template markup", folders: [
{ name: "Tags", folders: [
{ name: "tmpl"},
{ name: "if" },
{ name: "each" }
]},
]},
]
};
var samples = [
{ name: "Template in script block",
folders: [ ".tmpl" ],
description: "Rendering a template declared in script block" },
{ name: "Template as string",
folders: [ ".tmpl" ],
description:"Rendering a template passed as a string" },
{ name: "Render remote data",
folders: [ "API" ],
description: "Rendering remote data using templates" },
{ name: "Tree View",
folders: [ "tmpl", ".tmpl" ],
description: "A tree view using recursive nested templates" }
];
// ******************** Load UI ********************
$( "#samplesList" ).empty();
$( "#folderTmpl" ).tmpl( folders ).appendTo( "#samplesList" );
// ******************** Events ********************
$( "#samplesList" )
.delegate( ".content_true", "click", function() {
// Get the 'template item' for this folder
var fldrTmplItem = $.tmplItem( this );
// Toggle expanded property on data
fldrTmplItem.data.expanded = !fldrTmplItem.data.expanded;
// Update the template item
fldrTmplItem.update();
})
.delegate( ".folderItem", "click", function() {
// Get the 'template item' for this folder item
var dataItem = $.tmplItem( this ).data;
alert( dataItem.description );
});
// ******************** Helper functions ********************
function getSamples( folderTmplItem ) {
return $.map( samples, function( sample ) {
return $.inArray( folderTmplItem.data.name, sample.folders ) > -1 ? sample : null;
});
}
function getFolders( folderTmplItem ) {
return folderTmplItem.data.folders || [];
}
function expanderImage() {
if ( hasContent( this ) ) {
return this.data.expanded ? "expanded" : "collapsed";
}
return "empty"
}
function hasContent( folderTmplItem ) {
return getFolders( folderTmplItem ).length > 0 || getSamples( folderTmplItem ).length > 0;
}
</script>
</body>
</html>
|
