| Index: chrome/third_party/jstemplate/tutorial_examples/10-jsvalues.html
|
| ===================================================================
|
| --- chrome/third_party/jstemplate/tutorial_examples/10-jsvalues.html (revision 0)
|
| +++ chrome/third_party/jstemplate/tutorial_examples/10-jsvalues.html (revision 0)
|
| @@ -0,0 +1,96 @@
|
| +<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>
|
|
|
Chromium Code Reviews
Issue 119384:
Update JSTemplate to the latest version from Google Code (Closed)
Base URL: svn://chrome-svn/chrome/trunk/src/