| Index: chrome/third_party/jstemplate/tutorial_examples/10-jsvalues.html
|
| ===================================================================
|
| --- chrome/third_party/jstemplate/tutorial_examples/10-jsvalues.html (revision 177458)
|
| +++ chrome/third_party/jstemplate/tutorial_examples/10-jsvalues.html (working copy)
|
| @@ -1,96 +0,0 @@
|
| -<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: "Using Jstemplates", 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: "Instruction Attributes", items: [
|
| - {title: "jscontent"}, {title: "jsselect"}, {title: "jsdisplay"},
|
| - {title: "transclude"},{title: "jsvalues"}, {title: "jsskip"}, {title: "jseval"}
|
| - ]}
|
| - ]}
|
| - ]};
|
| -
|
| - var PEG_NAME = 'peg';
|
| - var TEMPLATE_NAME = 'tpl';
|
| -
|
| - // Called by the body onload handler:
|
| - function loadAll() {
|
| - var pegElement = domGetElementById(document, PEG_NAME);
|
| - loadData(pegElement, TEMPLATE_NAME, tplData);
|
| - }
|
| -
|
| - function loadData(peg, templateId, data) {
|
| - // Get a copy of the template:
|
| - var templateToProcess = jstGetTemplate(templateId);
|
| -
|
| - // Wrap our data in a context object:
|
| - var processingContext = new JsEvalContext(data);
|
| -
|
| - // 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>
|
| -
|
| -<!--
|
| -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">Outline heading</span>
|
| - <ul jsdisplay="items.length && !closed">
|
| - <li jsselect="items">
|
| - <!--Recursive tranclusion: -->
|
| - <div transclude="tpl"></div>
|
| - </li>
|
| - </ul>
|
| - </div>
|
| -
|
| -</div>
|
| -</body>
|
| -</html>
|
|
|