| <html> |
| <head><title>Jstemplates: Quick example</title> |
| <script src="../util.js" type="text/javascript"></script> |
| <script src="../jsevalcontext.js" type="text/javascript"></script> |
| <script src="../jstemplate.js" type="text/javascript"></script> |
| <script type="text/javascript"> |
| var user = "Jane User"; |
| |
| var tpl1Data = {addresses:[ |
| {location:"111 8th Av.", label:"NYC front door"}, |
| {location:"76 9th Av.", label:"NYC back door"}, |
| {location:"Mountain View", label:"Mothership"} |
| ] |
| }; |
| |
| var tpl2Data = {addresses:[ |
| {location:"534 Carlton Ave."}, |
| {location:"772 Broadway"} |
| ] |
| }; |
| |
| function showData() { |
| // This is the javascript code that processes the template: |
| var parent = new JsEvalContext(); |
| parent.setVariable('username', user); |
| |
| var input1 = new JsEvalContext( tpl1Data, parent); |
| var output1 = document.getElementById('tpl1'); |
| jstProcess(input1, output1); |
| |
| var input2 = new JsEvalContext( tpl2Data, parent); |
| var output2 = document.getElementById('tpl2'); |
| jstProcess(input2, output2); |
| } |
| </script> |
| </head> |
| <body onload="showData()"> |
| |
| |
| <div id="tpl1"> |
| <h1> |
| <span jsselect="username" jscontent="$this">User de Fault</span>'s |
| Address Book |
| </h1> |
| <table cellpadding="5"> |
| <tr><td><h2>Location:</h2></td><td><h2>Label:</h2></td></tr> |
| <tr jsselect="addresses"><td jscontent="location"></td><td jscontent="label"></td></tr> |
| </table> |
| </div> |
| |
| <div id="tpl2"> |
| <h1 jsselect="username" jscontent="$this + '\'s Previous Searches'"></h1> |
| <ul> |
| <li jsselect="addresses" jscontent="location"></li> |
| </ul> |
| </div> |
| |
| </body> |
| </html> |
