third_party/jstemplate/tutorial_examples/05-jsselect.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
   8     var tplData = {username:"Jane User",
   9                     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     function showData() {
  17       // This is the javascript code that processes the template:
  18       var input = new JsEvalContext(tplData);
  19       var output = document.getElementById('tpl');
  20       jstProcess(input, output);
  21     }
  22     </script>
  23 </head>
  24 <body onload="showData()">
  25
  26 <!--
  27 This is the template:
  28 -->
  29
  30 <div id="tpl">
  31 <h1>
  32   <span jsselect="username" jscontent="$this">User de Fault</span>'s
  33   Address Book
  34 </h1>
  35 <table cellpadding="5">
  36 <tr><td><h2>Location:</h2></td><td><h2>Label:</h2></td></tr>
  37 <tr jsselect="addresses"><td jscontent="location"></td><td jscontent="label"></td></tr>
  38 </table>
  39 </div>
  40
  41 </body>
  42 </html>