blob: ad9b7e256367056c52427d1e419f06e079722900 [file] [log] [blame]
<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;
<link rel="stylesheet" type="text/css" href="css/maps2.deb.css"/>
<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"
<a href="#" jsdisplay="!closed && items.length"
<span jscontent="title"
jseval="title? $counter.full++: $counter.empty++">
Outline heading
<ul jsdisplay="items.length && !closed">
<li jsselect="items">
<!--Recursive tranclusion: -->
<div transclude="tpl"></div>
<div id="titleCountTpl">
This outline has <span jscontent="$counter.empty"></span> empty titles
and <span jscontent="$counter.full"></span> titles with content.