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