third_party/jstemplate/tutorial_examples/06-jsdisplay.html

   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>