1 files changed, 118 insertions, 0 deletions
diff --git a/third_party/jstemplate/tutorial_examples/11-jseval.html b/third_party/jstemplate/tutorial_examples/11-jseval.html
new file mode 100644
index 0000000..ad9b7e2
--- /dev/null
+++ b/third_party/jstemplate/tutorial_examples/11-jseval.html
@@ -0,0 +1,118 @@
+<html>
+<head><title>Outline Tree Using Jstemplates</title>
+  <script src="../util.js" type="text/javascript"></script>
+  <script src="../jsevalcontext.js" type="text/javascript"></script>
+  <script src="../jstemplate.js" type="text/javascript"></script>
+  <script type="text/javascript">
+    // Hierarchical data:
+    var tplData = 
+      { title: "Jstemplates", items: [
+        { title: "", items: [
+          { title: "The Jstemplates Module"},
+          { title: "Javascript Data"},
+          { title: "Template HTML"},
+          { title: "Processing Templates with Javascript Statements"}
+          ]
+        },
+        { title: "Template Processing Instructions", items: [
+          { title: "Processing Environment" },
+          { title: "", items: [
+            {title: "jscontent"}, {title: "jsselect"}, {title: "jsdisplay"}, 
+            {title: "transclude"},{title: "jsvalues"}, {title: "jsskip"}, {title: "jseval"}
+          ]}
+        ]}
+      ]};
+      
+	  var PEG_NAME = 'peg';
+    var TEMPLATE_NAME = 'tpl';
+	  var TITLE_COUNT_NAME = 'titleCountPeg';
+    var TITLE_TEMPLATE_NAME = 'titleCountTpl';
+    
+    // Called by the body onload handler:
+    function loadAll() {
+      var titleCountElement = domGetElementById(document, TITLE_COUNT_NAME);
+      var pegElement = domGetElementById(document, PEG_NAME);
+      var counter = {full: 0, empty: 0};
+      
+      loadData(pegElement, TEMPLATE_NAME, tplData, counter);
+      loadData(titleCountElement, TITLE_TEMPLATE_NAME, tplData, counter);
+    }
+
+    
+    function loadData(peg, templateId, data, counter) {
+      // Get a copy of the template:
+      var templateToProcess = jstGetTemplate(templateId);
+      
+      // Wrap our data in a context object:
+      var processingContext = new JsEvalContext(data);
+  
+      processingContext.setVariable('$counter', counter);
+      
+      // Process the template
+      jstProcess(processingContext, templateToProcess);
+      
+      // Clear the element to which we'll attach the processed template:
+      peg.innerHTML = '';
+      
+      // Attach the template:
+      domAppendChild(peg, templateToProcess);
+    }
+    
+    // Function called by onclick to record state of closedness and 
+    // refresh the outline display
+    function setClosed(jstdata, closedVal) {
+      jstdata.closed = closedVal;
+      loadAll();
+    }
+    </script>
+    <link rel="stylesheet" type="text/css" href="css/maps2.deb.css"/>
+</head>
+<body onload="loadAll()">
+
+<!-- 
+This is the div to which the instantiated template will be attached.
+-->
+<div id="peg"></div>
+<div id="titleCountPeg"></div>
+<!--
+A container to hide our template:
+-->
+<div style="display:none">
+<!-- 
+This is the template div. It will be copied and attached to the div above with:
+ var apt = jstGetTemplate('apt');
+ appendChild(panel, apt)
+-->
+  <div id="tpl">
+  <!--
+  Links to open and close outline sections:
+  -->
+    <a href="#" jsdisplay="closed" 
+       jsvalues=".jstdata:$this"
+       onclick="setClosed(this.jstdata,0)">[Open]</a> 
+       
+    <a href="#" jsdisplay="!closed && items.length" 
+       jsvalues=".jstdata:$this" 
+       onclick="setClosed(this.jstdata,1)">[Close]</a> 
+       
+    <span jscontent="title" 
+          jseval="title? $counter.full++: $counter.empty++">
+      Outline heading
+    </span>
+    <ul jsdisplay="items.length && !closed">
+      <li jsselect="items">
+        <!--Recursive tranclusion: -->
+        <div transclude="tpl"></div>
+      </li>
+    </ul>
+  </div>
+
+  <div id="titleCountTpl">
+  <p>
+      This outline has <span jscontent="$counter.empty"></span> empty titles 
+      and <span jscontent="$counter.full"></span> titles with content.
+  </p>
+  </div>
+</div>
+</body>
+</html>