third_party/jstemplate/tutorial_examples/11-jseval.html

   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>