src/third_party/jstemplate/tutorial_examples/12-parent.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 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>