third_party/jstemplate/tutorial_examples/10-jsvalues.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: "Using Jstemplates", 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: "Instruction Attributes", 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
  29     // Called by the body onload handler:
  30     function loadAll() {
  31       var pegElement = domGetElementById(document, PEG_NAME);
  32       loadData(pegElement, TEMPLATE_NAME, tplData);
  33     }
  34
  35     function loadData(peg, templateId, data) {
  36       // Get a copy of the template:
  37       var templateToProcess = jstGetTemplate(templateId);
  38
  39       // Wrap our data in a context object:
  40       var processingContext = new JsEvalContext(data);
  41
  42       // Process the template
  43       jstProcess(processingContext, templateToProcess);
  44
  45       // Clear the element to which we'll attach the processed template:
  46       peg.innerHTML = '';
  47
  48       // Attach the template:
  49       domAppendChild(peg, templateToProcess);
  50     }
  51
  52     // Function called by onclick to record state of closedness and
  53     // refresh the outline display
  54     function setClosed(jstdata, closedVal) {
  55       jstdata.closed = closedVal;
  56       loadAll();
  57     }
  58     </script>
  59     <link rel="stylesheet" type="text/css" href="css/maps2.deb.css"/>
  60 </head>
  61 <body onload="loadAll()">
  62
  63 <!--
  64 This is the div to which the instantiated template will be attached.
  65 -->
  66 <div id="peg"></div>
  67
  68 <!--
  69 A container to hide our template:
  70 -->
  71 <div style="display:none">
  72 <!--
  73 This is the template div. It will be copied and attached to the div above with:
  74  var apt = jstGetTemplate('apt');
  75  appendChild(panel, apt)
  76 -->
  77   <div id="tpl">
  78   <!--
  79   Links to open and close outline sections:
  80   -->
  81     <a href="#" jsdisplay="closed" jsvalues=".jstdata:$this" onclick="setClosed(this.jstdata,0)">[Open]</a>
  82     <a href="#" jsdisplay="!closed && items.length" jsvalues=".jstdata:$this"
  83        onclick="setClosed(this.jstdata,1)">[Close]</a>
  84
  85     <span jscontent="title">Outline heading</span>
  86     <ul jsdisplay="items.length && !closed">
  87       <li jsselect="items">
  88         <!--Recursive tranclusion: -->
  89         <div transclude="tpl"></div>
  90       </li>
  91     </ul>
  92   </div>
  93
  94 </div>
  95 </body>
  96 </html>