2 <head><title>Outline Tree Using Jstemplates</title>
3 <script src="../util.js" type="text/javascript"></script>
4 <script src="../jsevalcontext.js" type="text/javascript"></script>
5 <script src="../jstemplate.js" type="text/javascript"></script>
6 <script type="text/javascript">
9 { title: "Jstemplates", items: [
11 { title: "The Jstemplates Module"},
12 { title: "Javascript Data"},
13 { title: "Template HTML"},
14 { title: "Processing Templates with Javascript Statements"}
17 { title: "Template Processing Instructions", items: [
18 { title: "Processing Environment" },
20 {title: "jscontent"}, {title: "jsselect"}, {title: "jsdisplay"},
21 {title: "transclude"},{title: "jsvalues"}, {title: "jsskip"}, {title: "jseval"}
27 var TEMPLATE_NAME = 'tpl';
28 var TITLE_COUNT_NAME = 'titleCountPeg';
29 var TITLE_TEMPLATE_NAME = 'titleCountTpl';
31 // Called by the body onload handler:
33 var titleCountElement = domGetElementById(document, TITLE_COUNT_NAME);
34 var pegElement = domGetElementById(document, PEG_NAME);
35 var counter = {full: 0, empty: 0};
37 loadData(pegElement, TEMPLATE_NAME, tplData, counter);
38 loadData(titleCountElement, TITLE_TEMPLATE_NAME, tplData, counter);
42 function loadData(peg, templateId, data, counter) {
43 // Get a copy of the template:
44 var templateToProcess = jstGetTemplate(templateId);
46 // Wrap our data in a context object:
47 var processingContext = new JsEvalContext(data);
49 processingContext.setVariable('$counter', counter);
51 // Process the template
52 jstProcess(processingContext, templateToProcess);
54 // Clear the element to which we'll attach the processed template:
57 // Attach the template:
58 domAppendChild(peg, templateToProcess);
61 // Function called by onclick to record state of closedness and
62 // refresh the outline display
63 function setClosed(jstdata, closedVal) {
64 jstdata.closed = closedVal;
68 <link rel="stylesheet" type="text/css" href="css/maps2.deb.css"/>
70 <body onload="loadAll()">
73 This is the div to which the instantiated template will be attached.
76 <div id="titleCountPeg"></div>
78 A container to hide our template:
80 <div style="display:none">
82 This is the template div. It will be copied and attached to the div above with:
83 var apt = jstGetTemplate('apt');
84 appendChild(panel, apt)
88 Links to open and close outline sections:
90 <a href="#" jsdisplay="closed"
91 jsvalues=".jstdata:$this"
92 onclick="setClosed(this.jstdata,0)">[Open]</a>
94 <a href="#" jsdisplay="!closed && items.length"
95 jsvalues=".jstdata:$this"
96 onclick="setClosed(this.jstdata,1)">[Close]</a>
98 <span jscontent="title"
99 jseval="title? $counter.full++: $counter.empty++">
102 <ul jsdisplay="items.length && !closed">
103 <li jsselect="items">
104 <!--Recursive tranclusion: -->
105 <div transclude="tpl"></div>
110 <div id="titleCountTpl">
112 This outline has <span jscontent="$counter.empty"></span> empty titles
113 and <span jscontent="$counter.full"></span> titles with content.