| <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 tplData = {username:"Joe User", |
| addresses:[ |
| {location:"111 8th Av.", label:"NYC front door"}, |
| {location:"76 9th Av.", label:"NYC back door"}, |
| {location:"Mountain View", label:"Mothership"} |
| ]}; |
| |
| function showData() { |
| // This is the javascript code that processes the template: |
| var input = new JsEvalContext(tplData); |
| var output = document.getElementById('tpl'); |
| jstProcess(input, output); |
| } |
| </script> |
| </head> |
| <body onload="showData()"> |
| |
| <!-- |
| This is the template: |
| --> |
| <div id="tpl"> |
| <h1> |
| <span jsselect="username" jscontent="$this">User de Fault</span>'s |
| Address Book |
| </h1> |
| <span jsdisplay="addresses.length==0">Address book is empty.</span> |
| <table cellpadding="5" jsdisplay="addresses.length"> |
| <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> |
| |
| </body> |
| </html> |
