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 <!-- 34 The element to which our template will be attached at display-time: 35 --> 36 <div id="peg"></div> 37 38 <!-- 39 A container to hide our template: 40 --> 41 <div style="display:none"> 42 43 <!-- 44 This 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
