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