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 tplData = {username:"Joe User", 8 addresses:[ 9 {location:"111 8th Av.", label:"NYC front door"}, 10 {location:"76 9th Av.", label:"NYC back door"}, 11 {location:"Mountain View", label:"Mothership"} 12 ]}; 13 14 function showData() { 15 // This is the javascript code that processes the template: 16 var input = new JsEvalContext(tplData); 17 var output = document.getElementById('tpl'); 18 jstProcess(input, output); 19 } 20 </script> 21 </head> 22 <body onload="showData()"> 23 24 <!-- 25 This is the template: 26 --> 27 <div id="tpl"> 28 <h1> 29 <span jsselect="username" jscontent="$this">User de Fault</span>'s 30 Address Book 31 </h1> 32 <span jsdisplay="addresses.length==0">Address book is empty.</span> 33 <table cellpadding="5" jsdisplay="addresses.length"> 34 <tr><td><h2>Location:</h2></td><td><h2>Label:</h2></td></tr> 35 <tr jsselect="addresses"><td jscontent="location"></td><td jscontent="label"></td></tr> 36 </table> 37 </div> 38 39 </body> 40 </html> 41
