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 user = "Jane User"; 8 9 var tpl1Data = {addresses:[ 10 {location:"111 8th Av.", label:"NYC front door"}, 11 {location:"76 9th Av.", label:"NYC back door"}, 12 {location:"Mountain View", label:"Mothership"} 13 ] 14 }; 15 16 var tpl2Data = {addresses:[ 17 {location:"534 Carlton Ave."}, 18 {location:"772 Broadway"} 19 ] 20 }; 21 22 function showData() { 23 // This is the javascript code that processes the template: 24 var parent = new JsEvalContext(); 25 parent.setVariable('username', user); 26 27 var input1 = new JsEvalContext( tpl1Data, parent); 28 var output1 = document.getElementById('tpl1'); 29 jstProcess(input1, output1); 30 31 var input2 = new JsEvalContext( tpl2Data, parent); 32 var output2 = document.getElementById('tpl2'); 33 jstProcess(input2, output2); 34 } 35 </script> 36 </head> 37 <body onload="showData()"> 38 39 40 <div id="tpl1"> 41 <h1> 42 <span jsselect="username" jscontent="$this">User de Fault</span>'s 43 Address Book 44 </h1> 45 <table cellpadding="5"> 46 <tr><td><h2>Location:</h2></td><td><h2>Label:</h2></td></tr> 47 <tr jsselect="addresses"><td jscontent="location"></td><td jscontent="label"></td></tr> 48 </table> 49 </div> 50 51 <div id="tpl2"> 52 <h1 jsselect="username" jscontent="$this + '\'s Previous Searches'"></h1> 53 <ul> 54 <li jsselect="addresses" jscontent="location"></li> 55 </ul> 56 </div> 57 58 </body> 59 </html> 60
