1<html> 2<head><title>Jstemplates: Quick example</title> 3 <script src="../util.js" type="text/javascript"></script> 4 <script src="../jsevalcontext.js" type="text/javascript"></script> 5 <script src="../jstemplate.js" type="text/javascript"></script> 6 <script type="text/javascript"> 7 var favdata = {title: 'Favorite Things', favs:['raindrops', 'whiskers', 'mittens']}; 8 9 function showData(reprocess) { 10 var templateToProcess; 11 var peg = document.getElementById('peg'); 12 13 if (!reprocess) { // Get a copy of the template: 14 templateToProcess = jstGetTemplate('t1'); 15 // Clear the element to which we'll attach the template: 16 peg.innerHTML = ''; 17 // Attach the template 18 domAppendChild(peg, templateToProcess); 19 } 20 else { // Use the copy we already have 21 templateToProcess = peg; 22 } 23 // Wrap our data in a context object: 24 var processingContext = new JsEvalContext(favdata); 25 26 // Process the template 27 jstProcess(processingContext, templateToProcess); 28 } 29 </script> 30 <link rel="stylesheet" type="text/css" href="css/maps2.deb.css"/> 31</head> 32<body onload="showData(false)"> 33<!-- 34The element to which our template will be attached at display-time: 35--> 36<div id="peg"></div> 37 38<!-- 39A container to hide our template: 40--> 41<div style="display:none"> 42 43<!-- 44This is the template div. It will be copied and attached to the div above. 45--> 46<div id="t1"> 47 <h1 jscontent="title"></h1> 48 <ul><li jscontent="$this" jsselect="favs"></li></ul> 49</div> 50 51</div> 52 53<p> 54<a href="#" onclick="favdata.favs.push('packages');showData(true);">Reprocess</a> 55</p> 56</body> 57</html> 58