Home | History | Annotate | Download | only in tutorial_examples 
      1 <html>
      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">
      7     // Hierarchical data:
      8     var tplData = 
      9       { title: "Jstemplates", items: [
     10         { title: "", items: [
     11           { title: "The Jstemplates Module"},
     12           { title: "Javascript Data"},
     13           { title: "Template HTML"},
     14           { title: "Processing Templates with Javascript Statements"}
     15           ]
     16         },
     17         { title: "Template Processing Instructions", items: [
     18           { title: "Processing Environment" },
     19           { title: "", items: [
     20             {title: "jscontent"}, {title: "jsselect"}, {title: "jsdisplay"}, 
     21             {title: "transclude"},{title: "jsvalues"}, {title: "jsskip"}, {title: "jseval"}
     22           ]}
     23         ]}
     24       ]};
     25       
     26 	  var PEG_NAME = 'peg';
     27     var TEMPLATE_NAME = 'tpl';
     28 	  var TITLE_COUNT_NAME = 'titleCountPeg';
     29     var TITLE_TEMPLATE_NAME = 'titleCountTpl';
     30     
     31     // Called by the body onload handler:
     32     function loadAll() {
     33       var titleCountElement = domGetElementById(document, TITLE_COUNT_NAME);
     34       var pegElement = domGetElementById(document, PEG_NAME);
     35       var counter = {full: 0, empty: 0};
     36       
     37       loadData(pegElement, TEMPLATE_NAME, tplData, counter);
     38       loadData(titleCountElement, TITLE_TEMPLATE_NAME, tplData, counter);
     39     }
     40 
     41     
     42     function loadData(peg, templateId, data, counter) {
     43       // Get a copy of the template:
     44       var templateToProcess = jstGetTemplate(templateId);
     45       
     46       // Wrap our data in a context object:
     47       var processingContext = new JsEvalContext(data);
     48   
     49       processingContext.setVariable('$counter', counter);
     50       
     51       // Process the template
     52       jstProcess(processingContext, templateToProcess);
     53       
     54       // Clear the element to which we'll attach the processed template:
     55       peg.innerHTML = '';
     56       
     57       // Attach the template:
     58       domAppendChild(peg, templateToProcess);
     59     }
     60     
     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;
     65       loadAll();
     66     }
     67     </script>
     68     <link rel="stylesheet" type="text/css" href="css/maps2.deb.css"/>
     69 </head>
     70 <body onload="loadAll()">
     71 
     72 <!-- 
     73 This is the div to which the instantiated template will be attached.
     74 -->
     75 <div id="peg"></div>
     76 <div id="titleCountPeg"></div>
     77 <!--
     78 A container to hide our template:
     79 -->
     80 <div style="display:none">
     81 <!-- 
     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)
     85 -->
     86   <div id="tpl">
     87   <!--
     88   Links to open and close outline sections:
     89   -->
     90     <a href="#" jsdisplay="closed" 
     91        jsvalues=".jstdata:$this"
     92        onclick="setClosed(this.jstdata,0)">[Open]</a> 
     93        
     94     <a href="#" jsdisplay="!closed && items.length" 
     95        jsvalues=".jstdata:$this" 
     96        onclick="setClosed(this.jstdata,1)">[Close]</a> 
     97        
     98     <span jscontent="title" 
     99           jseval="title? $counter.full++: $counter.empty++">
    100       Outline heading
    101     </span>
    102     <ul jsdisplay="items.length && !closed">
    103       <li jsselect="items">
    104         <!--Recursive tranclusion: -->
    105         <div transclude="tpl"></div>
    106       </li>
    107     </ul>
    108   </div>
    109 
    110   <div id="titleCountTpl">
    111   <p>
    112       This outline has <span jscontent="$counter.empty"></span> empty titles 
    113       and <span jscontent="$counter.full"></span> titles with content.
    114   </p>
    115   </div>
    116 </div>
    117 </body>
    118 </html>
    119