02-gettpl.html | Explore in Territory

<html>
<head><title>Jstemplates: Quick example</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">  
    var favdata = {title: 'Favorite Things', favs:['raindrops', 'whiskers', 'mittens']};
    
    function showData(reprocess) {
      var templateToProcess;
      var peg = document.getElementById('peg');
      
      if (!reprocess) {  // Get a copy of the template:
		  templateToProcess = jstGetTemplate('t1');
		  // Clear the element to which we'll attach the template:
		  peg.innerHTML = '';
		  // Attach the template
		  domAppendChild(peg, templateToProcess);
		}
		else {  // Use the copy we already have
		  templateToProcess = peg;
		}
		// Wrap our data in a context object:
		var processingContext = new JsEvalContext(favdata);
 
		// Process the template
		jstProcess(processingContext, templateToProcess);
    }
    </script>
    <link rel="stylesheet" type="text/css" href="css/maps2.deb.css"/>
</head>
<body onload="showData(false)">
<!--
The element to which our template will be attached at display-time:
-->
<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.
-->
<div id="t1">
  <h1 jscontent="title"></h1>
  <ul><li jscontent="$this" jsselect="favs"></li></ul>
</div>

</div>

<p>
<a href="#" onclick="favdata.favs.push('packages');showData(true);">Reprocess</a>
</p>
</body>
</html>
chromium/third_party/jstemplate/tutorial_examples/02-gettpl.html
